Блог

Я разрабатываю сайт, на котором на экране будут отображаться сообщения пользователей с их электронной почтой, при нажатии кнопки он перейдет к деталям этого конкретного сообщения. Я могу изменить маршрут, но он не дает мне подробностей. Скорее, это говорит о том, что переменная уменьшена в PostDetails.js имя ‘id’ не определено.

App.js код

`

 //app.js code
import React from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import AllPosts from './Components/AllPosts/AllPosts';
import NoMatch from './Components/NoMatch/NoMatch';
import PostDetails from './Components/PostDetails/PostDetails';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path='/'>
          <AllPosts></AllPosts>
        </Route>
        <Route to='/PostDetails/:id'>
            <PostDetails></PostDetails>
        </Route>
        <Route path='*'>
            <NoMatch></NoMatch>
        </Route>
      </Switch>
    </Router>
     
  )
}

export default App;

//ShowPost.js code  

`

ShowPost.js код

`

 //ShowPost.js code

 import React from 'react';
import { Link } from 'react-router-dom';

const ShowPost = (props) => {
const {title, id} = props.post;
return (
    <div>
        <h1>{title}</h1>
        <p>{id}</p>
        <button><Link to={`/PostDetails/${id}`}>Click</Link></button>
    </div>
);
};

export default ShowPost;  

 //PostDetails.js code

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

const PostDetails = () => {
    let {id} = useParams();
    const {singlePost,setSinglePost} = useState();
    useEffect(()=>{
        fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
        .then(res => res.json())
        .then(data => setSinglePost(data))
    },[])
    return (
        <div>
            <h1>This is details {singlePost.id} </h1>
        </div>
    );
};

export default PostDetails;  

Попробуйте передать пустое значение по умолчанию для singlePost и убедитесь, что вы можете консольно регистрировать возвращаемые данные из fetch

 const {singlePost,setSinglePost} = useState('');
  

Вам нужно установить начальное состояние на то, которое вы хотите, чтобы ваше сообщение отображалось по умолчанию, например

 const {singlePost,setSinglePost} = useState({title: "Loading", id: "Loading"});
  

Если вы не хотите показывать сообщение во время выборки сообщения, вы можете выполнить условный рендеринг компонента. Затем вы можете использовать свой текущий способ настройки состояния: const {singlePost,setSinglePost} = useState(); и отобразить сообщение условно:

 return (
    <div>
        {singlePost ? <h1>This is details {singlePost.id} </h1> : null}
    </div>
);
  

Это скроет сообщение до тех пор, пока оно не будет извлечено.

На ваш первоначальный вопрос: singlePost будет undefined , и попытка получить доступ к свойству id приведет к ошибке. Это связано с тем, что выборка выполняется асинхронно и не устанавливает состояние немедленно.

В обоих приведенных выше ответах не упоминается самое важное — useState hook не возвращает объект, вы не можете использовать деструктурирование объекта, поскольку useState возвращает array . Вместо этого вам придется использовать разрушение массива.

неверно:

 const { singlePost, setSinglePost } = useState('');
  

исправить:

 const [singlePost, setSinglePost] = useState('');