MERN栈测验App遇TypeError：无法读取undefined的map属性

问题定位 #

这个错误是因为尝试在undefined或非数组值上调用map()方法，下面针对两个组件分别排查和修复：

1. Questions.js组件修复 #

渲染选项列表时，questions?.options可能为undefined（比如Redux中questions.queue未加载完成，或某个问题对象缺失options属性），直接调用map()会触发错误。

修复方案： #

给options添加默认空数组，确保始终以数组类型调用map()：

// 原代码
questions?.options.map((q, i) => (
// 修复后
(questions?.options || []).map((q, i) => (

同时可以提前判断questions是否存在，优化加载状态：

// 在return语句前添加
if (!questions) return <h3 className='text-light'>加载中...</h3>

2. ResultTable.js组件修复 #

这里存在两个核心问题：

• useEffect无依赖数组，会无限重复调用API，导致data被反复重置
• API返回非数组值（如null/undefined）时，data.map()会报错；空数据判断逻辑错误

修复方案： #

1. 给useEffect添加空依赖数组，确保API只调用一次，同时强制data为数组类型：

useEffect(() => {
    getServerData(`${process.env.REACT_APP_SERVER_HOSTNAME}/api/result`, (res) => {
        // 确保返回值始终是数组
        setData(Array.isArray(res) ? res : [])
    })
}, []) // 空依赖数组避免重复调用

2. 修正空数据判断逻辑：

// 原代码
{ !data ?? <div>No Data Found </div>}
// 修复后
{ data.length === 0 && <div>No Data Found</div>}

3. 给data.map添加兜底，确保安全调用：

// 原代码
data.map((v, i) => (
// 修复后
(data || []).map((v, i) => (

额外建议 #

• 在Redux的reducer中给questions.queue设置默认空数组，从源头避免初始值为undefined的问题
• 可以在useFetchQestion钩子中添加数据格式校验，确保返回的问题结构包含options数组

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