时间戳

首页 > 解决方案 > 反应状态正在更新而不调用 setState

reactjs - 反应状态正在更新而不调用 setState

问题描述

即使我创建了新变量并且没有调用 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>
    );
}

state.persons 在使用后检查到控制台时发生了变化，person.name = event.target.value即使我指向新的数组people

标签： reactjs

解决方案

扩展语法只创建数组的一级深层副本，而不是深层副本，并且由于数组中有对象，因此设置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 })
}

推荐阅读