React中数组无法展开报错：prevArray不可迭代问题求助

核心原因 #

这个错误表明调用setSongNames时，传入的prevArray不是可迭代类型（比如不是数组）。虽然组件内初始化了useState([])，但错误栈指向Context的Provider，说明Context中存储的songNames状态被意外设置成了非数组值。

具体排查与修复步骤 #

• 检查Context的状态初始化与更新逻辑
  打开Context.js，找到对应useState的位置（错误栈显示在第19行），确认初始值是[]而不是undefined、null或对象。同时排查所有修改该Context状态的代码，看是否有地方把songNames改成了非数组类型（比如直接赋值单个对象、字符串等）。

• 修正变量名错误
  你代码里定义的新数组变量是newSongsToAdd，但更新state时用的是newSongNameArray——这个变量未定义，会导致undefined被展开，虽然这不是当前报错的直接原因，但会引发后续数据异常，必须统一变量名：

  setSongNames(prevArray => [...prevArray, ...newSongsToAdd])
  

• 添加类型安全兜底
  为了避免意外的非数组状态导致报错，在更新时强制校验prevArray的类型，确保它是数组：

  setSongNames(prevArray => {
    const safePrev = Array.isArray(prevArray) ? prevArray : [];
    return [...safePrev, ...newSongsToAdd];
  })
  

  这样哪怕之前的状态被意外改成非数组，也会用空数组兜底，避免不可迭代错误。

• 排查其他组件对Context状态的修改
  如果你能直接替换state（比如setSongNames(newSongsToAdd)）但不能合并，说明存在其他地方错误地更新了状态：比如某个组件调用Context的setter时，直接传入了单个值而非数组（比如setSongNames(song)而不是setSongNames([song])），这种操作会把数组状态改成单个值，后续再用展开语法就会触发不可迭代错误。

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