React js TypeError：无法读取未定义的属性'id'答案

【问题标题】：React js TypeError: Cannot read property 'id' of undefinedReact js TypeError：无法读取未定义的属性'id'
【发布时间】：2020-12-24 11:12:19
【问题描述】：

我正在开发一个网站，用户的帖子及其电子邮件将显示在屏幕上，当单击按钮时，它将转到该特定帖子的详细信息。我可以更改路线，但没有提供详细信息。而是说在 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;

【问题讨论】：

标签： javascript json reactjs ecmascript-6 frontend

【解决方案1】：

上面的两个答案都没有提到最关键的事情 - useState hook 不返回一个对象，你不能使用一个对象解构，因为@ 987654322@ 返回一个array。您将不得不使用数组解构。

错误：

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

正确：

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

【讨论】：

【解决方案2】：

您需要将初始状态设置为您希望帖子默认显示的状态，例如

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 将产生错误。这是因为 fetch 是异步的，不会立即设置状态。

【讨论】：

【解决方案3】：

尝试为singlePost 传递一个默认的空值，并确保您可以通过控制台记录来自fetch 的返回数据

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

【讨论】：