使用useEffect与useState时state返回undefined的问题排查

API 探路者

2026-8-6

问题分析与解决方案

核心问题

你遇到的报错本质是React组件初始渲染时，异步API请求还未完成，projects数组为空，直接访问projects[0].name相当于读取undefined.name，触发类型错误。

所谓“改字符串再改回就能显示”，是因为热重载时API请求已经完成，projects已经有数据了，此时渲染自然正常。304状态码是浏览器缓存机制，和这个报错无关。

解决方法

以下几种方案都能解决这个问题，选适合你的即可：

1. 使用可选链操作符（最简洁）

直接在访问属性时加上?.，当projects[0]不存在时会返回undefined，不会抛出错误：

return (<div>
    {projects[0]?.name}
</div>)

2. 条件渲染（更灵活，可加加载提示）

先判断数组是否有数据，再渲染内容，还能在加载时显示提示：

return (<div>
    {projects.length > 0 ? projects[0].name : '加载中...'}
</div>)

或者用逻辑与短路写法：

return (<div>
    {projects.length && projects[0].name}
</div>)

3. 加固API数据处理（排查潜在隐患）

虽然其他模块正常，但可以在更新状态前确认数据类型，避免API返回异常导致projects变成非数组：

const getProjectData = async () => {
    try {
        const { data } = await API.getAllProjects()
        // 确保是数组再更新状态
        setProjects(Array.isArray(data.data) ? data.data : [])
    } catch (err) {
        console.log(err);
        // 出错时重置状态为空数组
        setProjects([])
    }
}