向数组添加元素时出现Invalid attempt to spread non-iterable instance错误

我之前也碰到过一模一样的坑，咱们一步步拆解问题、搞定它：

可能的报错原因 #

• 最常见的情况是**arr1被意外改成了非数组类型**：虽然你初始化时设了arr1: []，但后续某个操作可能不小心把它改成了null、undefined或者普通对象，导致展开运算符...无法作用在非可迭代实例上。
• 另外，React的setState是异步的，如果之前有异步更新arr1的逻辑，直接用this.state.arr1可能拿到的不是最新的数组状态，也会引发意外。

具体解决方案 #

1. 给数组加兜底，避免非数组类型 #

可以用空数组做兜底，哪怕arr1变成了非数组，也能正常展开：

this.setState({ 
  disabled: true, 
  arr1: [ ...(this.state.arr1 || []), "Test" ] 
});

2. 用函数式更新获取最新state #

因为setState是异步的，推荐用函数式更新来确保拿到的是最新的状态快照，连续更新数组时更靠谱：

this.setState(prevState => ({
  disabled: true,
  arr1: [ ...prevState.arr1, "Test" ]
}));

这里的prevState是React提供的最新状态，能保证你操作的是最新版的arr1数组。

3. 排查代码中是否误改了arr1类型 #

全局搜一下你的代码，看看有没有类似this.setState({ arr1: someNonArrayValue })或者直接修改this.state.arr1的操作，确保arr1始终保持数组类型。

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