React更新数组状态报Cannot read property Symbol(Symbol.iterator)错如何解决

错误原因 #

报错由两个核心问题导致：

1. setAll 调用语法错误：useState 数组状态更新时，需要传入完整的新数组，你直接展开all作为setAll的参数，相当于把数组元素挨个传入更新函数，第一个元素会被当作新状态（如果all是空数组的话相当于传入undefined，后续对这个值展开就会触发不可迭代的报错）。
2. 没有加触发条件：没有对currentQuestion的值做判断，初始值1的时候就会执行更新逻辑，不符合你“计数器到2之前不加载问题”的要求。

修复后的代码 #

import Questions from './dataJSON'

const [all, setAll] = useState([])

useEffect(() => {
  // 满足currentQuestion >=2的条件才执行添加逻辑
  if (currentQuestion >= 2) {
    // 函数式更新获取最新的all状态，避免闭包导致的更新异常
    setAll(prevAll => [...prevAll, Questions[currentQuestion - 1]])
  }
}, [currentQuestion])

代码说明 #

• 用函数式更新的写法获取最新的all状态（prevAll参数），可以避免因闭包缓存旧状态导致的更新异常问题，比直接依赖all更可靠。
• 加了currentQuestion >= 2的判断，符合你2之前不加载问题的需求。
• 展开旧状态之后追加新的问题对象，整体作为新数组传入setAll，符合React状态更新的语法要求。

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