React遍历数组state时报TypeError: 无法读取undefined的'anwsers'属性怎么办？

• 赋值逻辑未做有效性校验：当currentQuestion取值为0时，currentQuestion - 1得到索引值-1，questions[-1]为undefined，被直接存入all数组。遍历数组时读取undefined元素的anwsers属性，就会触发该类型错误。
• useEffect更新state存在闭包陷阱：代码中通过[...all, seperate]的方式更新数组，但依赖数组仅包含currentQuestion，未包含all，多次触发更新时会拿到旧的all值，可能导致state内容异常。
• 渲染时未做空值兼容：遍历渲染时没有校验item、item.anwsers是否存在，只要任意一级属性为undefined就会直接报错。

1. 渲染层添加空值校验，使用可选链语法兼容不存在的属性，同时为遍历元素添加唯一key属性（React列表渲染强制要求），修改遍历代码如下：

{all.map((item, index) =>
   <div key={index}>
    {/* 可选链校验item和anwsers是否存在，避免报错 */}
    {item?.anwsers?.map((item_2, idx) => <h3 key={idx}>{item_2.isCorrect && item_2.anwser}</h3>)}
       <p>{item?.question}</p>
   </div>
)}

注：生产环境建议用业务唯一id作为key，不要用索引，避免列表重排时出现渲染异常。

2. 修复useEffect中的state更新逻辑，先校验取值有效性，再用函数式更新避免闭包问题，同时补全依赖项：

useEffect(() => {
        const seperate = questions[currentQuestion -1];
        // 仅当拿到有效数据时才更新state
        if(seperate) {
            // 函数式更新可以直接拿到最新的state值，无需将all加入依赖数组
            setAll(prevAll => [...prevAll, seperate])
        }
    }, [currentQuestion, questions])

3. 检查属性名拼写：代码中anwsers、anwser为拼写错误（正确拼写为answers、answer），如果数据源返回的是正确拼写的字段，需要同步修改代码中的属性名，避免读取不到属性。

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