实际使用效果挂钩：TypeError：无法读取未定义的属性'title'

Question

我正在学习react useEffects挂钩，我正在使用JSON占位符作为我的其余API，

我能够显示所有帖子，所有用户等，现在我想使用useEffects显示单个帖子

这是我的解决方法

import React, {useState, useEffect} from 'react';
import axios from 'axios'
function Data(){

const[post, setPost] = useState();

const[id, setId] = useState(1);

useEffect(()=>{
  console.log('call only once');
    axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
    .then(res =>{
      console.log(res);
      setPost(res.data);
    })
    .catch(error=>{
      console.log(error);
    })

}, []);

    return (
      <div>

      <h1> LIst of Posts </h1>
      <input type="text" value={id} onChange={e=>setId(e.target.value)} />

      <div>{post.title}</div>

      </div>
    );

}

export default Data;

现在，当我运行应用程序时，出现以下错误

TypeError: Cannot read property 'title' of undefined

我的代码在做什么错？

Answer 1

您的代码正在尝试读取尚不存在的对象属性。尝试使用该调用构造具有预定结构的post对象：