«Недопустимая попытка распространения не повторяемого экземпляра» при добавлении в массив

Question

В моем приложении я добавляю компоненты динамически, и это работает. Теперь я попытался реализовать дополнительные массивы, которые хранят поля для этих компонентов. Однако, когда я пытаюсь добавить их, я получаю сообщение об ошибке:

TypeError: Invalid attempt to spread non-iterable instance

Я добавил следующую строку кода над массивом, в котором индексы добавляются в массив для каждого компонента.

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

Я объявляю массив следующим образом:

arr1: []

Answer 1

Вероятно, у вас есть неинициализированное состояние для arr1, что означает, что вы пытаетесь распространить вероятное неопределенное значение.

Если вы устанавливаете свое состояние в другом месте (я полагаю, вы делаете), вы не можете убедитесь, что он правильно инициализирован (см. жизненные циклы в документах ).

Внутри вашего компонента инициализируйте состояние, используя свойство класса или в конструкторе:

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

       this.state = {
         arr1: []
       }
    }

    ...

Answer 2

Похоже, что начальное значение this.state.arr1 не определено, поскольку оно не может быть определено при инициализации состояния.

Если вы хотите sh динамически добавить ключ arr1 в ваше состояние, вы может попробовать что-то вроде:

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

Надеюсь, это поможет