Question

在我的应用程序中，我正在动态添加组件，该组件正在运行。我现在尝试实现存储这些组件字段的其他数组。但是，当我尝试添加到它们时，出现错误：

TypeError: Invalid attempt to spread non-iterable instance

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

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

我声明数组如下：

arr1: []

Answer 1

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

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

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

希望这会有所帮助

Answer 2

您可能对arr1处于未初始化状态，这意味着您正试图散布可能未定义的值。

如果您将状态设置为其他位置（我想可以），则无法确定状态是否已正确初始化（请参见lifecycles on docs）。

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

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

       this.state = {
         arr1: []
       }
    }

    ...

添加到阵列时，“传播无效实例的无效尝试”

2 个答案: