React中fetch后useState未更新致map报错，求解决方法

错误核心原因 #

你碰到的Cannot read properties of null (reading 'map')错误，本质是组件首次渲染时objectsArr的初始值为null，而null没有map方法。虽然fetch能返回正常数据，但React组件会先完成首次渲染（此时objectsArr还是null），等fetch请求完成后才会更新状态触发二次渲染，所以首次渲染阶段就会抛出错误。

另外你的代码里有一行多余且易出问题的代码：const contentDiv = document.getElementsByClassName('content')[0];——这行在组件函数体内，每次渲染都会执行，而此时DOM还未完成渲染，大概率会拿到null，而且React开发中不需要这种方式获取DOM元素，建议直接删除。

解决办法 #

这里提供两种可靠的修复方案：

方案1：将useState初始值设为空数组

把useState的初始值从null改成[]（空数组），这样首次渲染时objectsArr.map()遍历空数组不会报错，等fetch返回数据后，状态更新会自动替换成真实数据：

import React, { useEffect, useState } from 'react';

function MainContent() {
    // 初始值改为空数组
    const [objectsArr, setObjectsArr] = useState([]);

    useEffect(() => {
        async function fetchMyAPI() {
            let response = await fetch('http://localhost:3030/pickedObjects')
            response = await response.json();
            setObjectsArr(response)
        }
        fetchMyAPI()
    }, [])

    return (
        <ul className="content row">
            {objectsArr.map((item) => {
                return (
                    <ContentItem className="item" item={item} />
                )
            })}
        </ul>
    );
}

export default MainContent;

方案2：添加条件判断/可选链保护

如果必须保留null作为初始值，可以在map前添加条件判断，或者使用可选链操作符?.，确保只有当objectsArr不为null时才执行map：

// 方式1：条件判断
{objectsArr && objectsArr.map((item) => {
    return <ContentItem className="item" item={item} />
})}

// 方式2：可选链
{objectsArr?.map((item) => {
    return <ContentItem className="item" item={item} />
})}

额外提示 #

• 确认fetch返回的response确实是数组类型，如果返回的是嵌套对象（比如{ data: [...] }），需要改成setObjectsArr(response.data)，否则即使状态更新，map仍会报错。
• 建议给fetch添加错误处理，避免请求失败导致状态一直停留在初始值：

async function fetchMyAPI() {
    try {
        let response = await fetch('http://localhost:3030/pickedObjects')
        if (!response.ok) throw new Error('请求失败')
        const data = await response.json();
        setObjectsArr(data)
    } catch (err) {
        console.error(err)
        // 请求失败时设置空数组，避免页面报错
        setObjectsArr([])
    }
}

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