TypeError: "x" is (not) "y" after destructuring an object

Question

在我的 React 应用程序中，当我运行这段代码时，我得到 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 });
}

如果有帮助，将此方法作为点击传递到功能组件中属性:

        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，而不是 this.state.persons 的 persons 属性（不存在）。相反，做：

const { persons } = this.state;

TypeError: "x" is (not) "y" after destructuring an object

TypeError: "x" is (not) "y" after destructuring an object

javascript

destructuring

reactjs