Question

我尝试更新位置对象中的state。不知何故，setState对我不起作用。

console.log确实正确返回newName。

我没有直接看到我的错。有人能告诉我我的错误在哪里吗？

state = {
    locations: [
       {name:"name1", address:"address1", locationSelected:false},
       {name:"name2", address:"address2", locationSelected:false}
    ]
}

selectLocationHandler = (id) => {
    let theLocations = [...this.state.locations];
    theLocations[id] = {...theLocations[id], name:"newName!!!!"};
    console.log(theLocations[id].name + "testtest");

    this.setState({theLocations}, () => {
        console.log(this.state.locations[id].name + " it worksss");
    });
}

Answer 1

此代码的主要问题是您正在直接更改状态对象。您应该将所有状态对象视为不可变。在您的代码中，您实际上不需要setState调用，因为状态已经更新。定义theLocations时，您正在克隆数组，而不是该数组中的对象。

要克隆对象数组，请使用：

const theLocations = this.state.locations.map(l => Object.assign({}, l));

获得克隆的对象数组后，只需设置如下名称：

theLocations[id].name = "newName!!!!";

此处的另一个错误是您将theLocations保存为状态对象中的新属性。您需要将locations设置为setState函数中的键：

this.setState({locations: theLocations}, () => {});

完整代码：

selectLocationHandler = (id) => {
    const theLocations = this.state.locations.map(l => Object.assign({}, l));
    theLocations[id].name = "newName!!!!";
    this.setState({locations: theLocations}, () => {
      console.log(this.state.locations[id].name + " it worksss");
    });
}

Answer 2

在setState中，您应指定要更新的状态的属性名称。在您的情况下，{theLocations}表示您拥有下一个对象{theLocations: theLocations}。您需要将其更改为： this.setState({locations: theLocations}, () => { console.log(this.state.locations[id].name + " it worksss"); });

Answer 3

将数组重置为空，然后将状态设置为新值：

 this.setState({ locations: [] }, () => this.setState({ locations: theLocations }))

setState不能用于更新React中的数组

3 个答案: