React+Express应用报错：map函数读取undefined问题求助

问题根源 #

报错"无法读取undefined的map函数"是因为：

• 组件首次渲染时，API请求尚未完成，content.webProjects为undefined，传给TableData组件后，执行projectData.map()触发错误。
• App组件初始状态设置错误：const [content, setContent] = useState([{}])，初始值是包含空对象的数组，但后端返回的是带有webProjects数组属性的对象，导致初始状态下content.webProjects不存在，即为undefined。

解决方案 #

步骤1：修正App组件的初始状态

将初始状态改为与后端返回结构匹配的对象，确保webProjects初始为一个空数组，这样即使API未返回数据，projectData也是数组，可安全调用map：

// App.js 修改useState部分
const [content, setContent] = useState({ webProjects: [] })

步骤2（可选但推荐）：给TableData组件加空值保护

为了让组件更健壮，在map前添加空值判断，避免因任何异常导致projectData为undefined/null时报错：

// TableData.js 修改tbody部分
<tbody>
    {projectData?.map((project) => (
        <tr key={project.ID}>
            <td>{project.ID}</td>
            <td>{project.TITLE}</td>
            <td>{project.DESCRIPTION}</td>
            <td>{project.URL}</td>
        </tr>
    ))}
</tbody>

或者用条件渲染写法：

<tbody>
    {projectData && projectData.map((project) => (
        <tr key={project.ID}>
            <td>{project.ID}</td>
            <td>{project.TITLE}</td>
            <td>{project.DESCRIPTION}</td>
            <td>{project.URL}</td>
        </tr>
    ))}
</tbody>

补充说明 #

之前开发时功能正常，可能是因为API请求完成速度快于组件首次渲染，掩盖了初始状态的问题；重新加载后，组件先以错误的初始状态渲染，才暴露了报错。

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