Fetch Axios错误无法读取属性React

Question

我遵循了一些教程，一切都对这个家伙有效，但对我来说无效。我使用axios尝试获取一些简单的数据，但我在控制台中遇到了无法读取属性的错误，它没有获取和显示数据。

我觉得我的设置很基本，所以我真的很想知道我在这里做错了什么。我的PHPStorm没有标记任何拼写错误，所以我不确定我做得对。

这是我的DataFetching.js代码：

import React, {useState, useEffect} from "react";
import axios from "axios";
function DataFetching(){
const [post, setPost] = useState();
const [id, setId] = useState(1)
const [idFromButtonClick, setIdFromButtonClick] = useState(1)
const handleClick = () => {
setIdFromButtonClick(id)
}
useEffect(() => {
axios.get(`https://jsonplaceholder.typicode.com/posts/${idFromButtonClick}`)
.then(res => {
console.log(res);
setPost(res.data)
})
.catch(err => {
console.log(err)
})
}, [idFromButtonClick])
return (
<div>
<input type="text" value={id} onChange={e => setId(e.target.value)} />
<button type="button" onClick={handleClick}>Fetch</button>
{post.title}
</div>
)
}
export default DataFetching

我得到的错误是：

js:27未捕获类型错误：无法读取未定义的属性(正在读取"title"(在DataFetching(DataFetching.js:27:1(

有谁能为我指明正确的方向吗？

Answer 1

初始post值未定义。您可以像这样显示帖子｛post？.title｝，这样，如果它没有定义，就不会引发错误。

检查此处的可选链式操作员