Question

即使我创建了新变量且未调用setState，我的状态也发生了改变。

这是我的代码

changeName = (event, id) => {
    const persons = [...this.state.persons]; // Create a copy of array using spread operator
    const person = persons.find(cur => cur.id === id);
    person.name = event.target.value;

    console.log(persons);
    console.log(this.state.persons);
}

render() {
    let allPersonsArr = this.state.persons.map(cur => {
        return <Person name={cur.name} age={cur.age} job={cur.job} key={cur.id} change={(event) => this.changeName(event, cur.id)}/>;
    });

    return(
        <div>
            {allPersonsArr}
        </div>
    );
}

使用person.name = event.target.value后，即使登录到新的阵列人员，state.persons也已更改为登录控制台。

Answer 1

spread语法只会创建一个数组的深层副本，而不是深层副本，并且由于数组中有对象，因此设置person.name会更改原始对象

changeName = (event, id) => {
    const persons = this.state.persons(person => {
        if (person.id === id) {
            return {...person, name: event.target.value}
        }
        return persons;
    })
    this.setState({ persons })
}

Answer 2

您的代码实际上不会更改您状态的主要对象。它只是编辑状态的副本（不是很深）。

要进行原始更新，请致电database queries。另外，为确保更新不会影响副本，您可以使用 React Immutability Helpers 。

反应状态正在更新而无需调用setState

2 个答案: