TypeError: «x» - это (не) «y» после разрушения объекта

Question

В моем приложении реакции, когда я запускаю этот код, я получаю TypeError: "x" is (not) "y":

deletePersonHandler = (personIndex) => {
    const { persons } = this.state.persons;
    persons.splice(personIndex, 1);
    this.setState({ persons });
}

Нет проблем, когда я не использую деструктуризацию:

deletePersonHandler = (personIndex) => {
    const persons = this.state.persons;
    persons.splice(personIndex, 1);
    this.setState({ persons });
}

Если этопомогает этот метод передается в функциональный компонент как свойство click:

        persons = (
            <div>
                {this.state.persons.map((person, index) => {
                    return <Person name={person.person} age={person.age} click={() => this.deletePersonHandler(index)} changed={this.nameChangedHandler.bind(this)} />;
                })}
            </div>
        );

Почему деструктуризация имеет значение?

Answer 1

Вы пытаетесь деструктурировать this.state.persons как объект со свойством persons - но вам нужно свойство persons this.state, а не свойство persons this.state.persons (которое не 'не существует).Вместо этого выполните:

const { persons } = this.state;