使用Axios在React中Fetch数据时出现Cannot read properties错误求助

错误原因 #

你初始化post状态时未设置默认值，const [post, setPost] = useState()会让post初始值为undefined。组件首次渲染时，Axios的网络请求还未完成，此时直接访问post.title就会触发"Cannot read properties of undefined (reading 'title')"错误。

解决方案 #

以下三种方法均可解决该问题，任选其一即可：

1. 给post设置初始空对象

修改useState的初始化值，让post默认是一个空对象，即使请求未完成，访问post.title只会得到undefined，不会抛出错误：

const [post, setPost] = useState({});

2. 使用可选链操作符（推荐）

在访问title时添加可选链?.，它会自动判断post是否存在，不存在则直接返回undefined，避免报错：

{post?.title}

3. 条件渲染

通过逻辑与操作符判断post是否存在，只有存在时才渲染title：

{post && post.title}

修改后的完整代码示例（以可选链为例） #

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

内容的提问来源于stack exchange，提问作者R-b-n