获取 Axios 错误无法读取属性 React答案

【问题标题】：Fetch Axios error Cannot read properties React获取 Axios 错误无法读取属性 React
【发布时间】：2022-09-15 02:08:03
【问题描述】：

我遵循了一些教程，一切都适用于这个人，但不适用于我。我使用 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

我得到的错误是：

DataFetching.js:27 Uncaught TypeError: Cannot read properties of undefined (reading \'title\') 在 DataFetching (DataFetching.js:27:1)

有没有人可以指出我正确的方向？

在第一次渲染时，post 是未定义的，并且您无法读取未定义的属性，如错误所述。尝试post?.title 或其他一些在未定义该属性时不访问该属性的方法。
嗯，所以我应该在 {post.title} 周围设置一个条件？

标签： reactjs axios

【解决方案1】：

初始 post 值未定义。您可以像 {post?.title} 这样显示帖子，因此，如果它不是未定义的，则不会引发错误。

检查可选的链接运算符here

【讨论】：