添加到数组时“传播不可迭代实例的无效尝试”

Posted 2023-02-23

【中文标题】添加到数组时“传播不可迭代实例的无效尝试”

【英文标题】：“Invalid attempt to spread non-iterable instance” When Adding to Array

【发布时间】：2020-06-30 14:00:28

【问题描述】：

在我的应用程序中，我正在动态添加组件，这是有效的。我现在尝试实现额外的数组来存储这些组件的字段。但是，当我尝试添加它们时，我得到了错误：

TypeError: Invalid attempt to spread non-iterable instance

我在数组上方添加了以下代码行，其中索引被添加到每个组件的数组中。

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

我声明数组如下：

arr1: []

【问题讨论】：

需要更多上下文。最初的state 对象是什么？

@Nick 不确定我刚刚添加的编辑是否是您的意思，但我已经进行了更改。

谢谢！您能否显示您实际创建初始 this.state 值的代码？

【参考方案1】：

arr1 可能处于未初始化状态，这意味着您正在尝试传播可能未定义的值。

如果你在别处设置你的状态（我想你这样做了），你不能确定它是否被正确初始化（见lifecycles on docs）。

在您的组件内部，使用类属性或在构造函数中初始化状态：

class Thing extends Component 
    //Class property
    state = 
      arr1: []
    
    //Or in constructor
    constructor(props) 
       super(props);

       this.state = 
         arr1: []
       
    

    ...

【讨论】：

所以我在“this.state”中声明“arr1”：

@LondonMassive 在这个例子中，是的。选择方法之一，类属性或构造函数内部。

【参考方案2】：

this.state.arr1 的初始值似乎是未定义的，因为它可能在初始化状态时未定义。

如果您希望在您的状态中动态添加 arr1 键，您可以尝试以下操作：

const oldArr1 = this.state.arr1 || [];
this.setState(disabled: true, arr1: [...oldArr1, "Test"]);

希望对你有帮助