React函数组件报Cannot read property 'map' of undefined如何解决

核心错误点（直接导致map报错） #

你fetch请求的then链式调用存在语法遗漏：第一个then的回调没有返回res.json()的执行结果，导致第二个then接收到的res为undefined，调用setProjects(undefined)后，原本初始化为空数组的projects被覆盖为undefined，调用map方法自然报错。 #

修复步骤 #

1. 修正fetch的链式调用写法 #

修改projects.component.jsx中useEffect里的fetch逻辑，给第一个then加上return：

useEffect(() => {
    fetch("http://127.0.0.1:8000/api/projects/")
        .then((res) => {
            // 这里必须加return，否则下一个then拿不到解析后的结果
            return res.json();
        })
        .then((res) => {
            setProjects(res);
        })
        .catch(err => console.log(err))
}, []);

你也可以简写为隐式return：

.then((res) => res.json())

2. 增加渲染前的安全校验（可选，避免后续接口异常导致同类报错） #

给map调用加可选链操作符，或者提前判断projects是否为数组，防止接口返回非数组类型的异常值时报错：

{projects?.map((project) => (
    <div className="notes" key={project.id}>
        <h1>{ project.title }</h1>
    </div>
))}

也可以搭配加载状态提升用户体验：

// 新增loading状态
const [loading, setLoading] = useState(true);

// fetch的第二个then里加
.then((res) => {
    setProjects(res);
    setLoading(false);
})

// 渲染部分判断
if(loading) return <div>加载中...</div>
return (
    // 原有渲染逻辑
)

3. 额外排查点 #

如果修正后仍然报错，请确认你接口返回的结果是否直接是项目数组，部分接口会把数据放在嵌套字段里（比如{code:200, data: [...]}），这种情况需要调整setProjects的赋值逻辑为setProjects(res.data)。

内容的提问来源于stack exchange，提问作者zain