Javascript 如何对React JS中嵌套在数组中的对象使用“setState”？

有了它，我就能够在一个简单的对象上成功地使用

setState

——当我点击“Joey”时，名称变为“Igor”

尽管我知道这不是

setState

的工作方式，但我试图通过传递

index

然后写入

this.state.names[index].name:newname

来访问

name

。没什么奇怪的，它没用

我已经研究过了，但找不到类似的问题，尽管我发现有很多关于不变性助手的提到。但我仍然不确定这是否是一条路要走

---

使用

setState

修改嵌套在数组中的对象的最佳方法是什么？

我将使用以下切换方法：

toggle = (nameYouWantChanged, nameYouWantItChangedTo) => {

  this.setState({
    names: this.state.names.map(obj => 
      obj.name === nameYouWantChanged
        ? { name: nameYouWantItChangedTo }
        : obj
    )
  })

}

---

已经修改了代码，可以找到工作示例

可在此处找到更改：

toggle = (index, newname) => {
    this.setState((prevState, props) => ({
        // Return new array, do not mutate previous state.
        names: [
            ...prevState.names.slice(0, index),
            { name: newname },
            ...prevState.names.slice(index + 1),
        ],
    }));
}

render() {
    const names = this.state.names.map((name, index) => (
        // Need to bind the index so callback knows which item needs to be changed.
        <Card key={index} change={this.toggle.bind(this, index)} {...name} />
    ))

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

toggle=（索引，新名称）=>{
this.setState（（prevState，props）=>({
//返回新数组，不要改变以前的状态。
姓名：[
…prevState.names.slice（0，索引），
{name:newname}，
…prevState.names.slice（索引+1），
],
}));
}
render（）{
const names=this.state.names.map（（名称，索引）=>(
//需要绑定索引，以便回调知道需要更改哪些项。
))
返回(
{names}
);
}

---

其思想是，您需要通过

.bind

将索引传递到回调函数中，并使用修改后的名称返回一个新的

状态

数组。您需要传递索引，以便组件知道要将

名称

更改为

新名称

this.setState（this.state）

？您如何知道单击了哪个对象？您需要一些标识符，例如特定

卡的索引。这非常有用，谢谢Tay。这是可行的，但其他人可能会在以后看到这一点——我在最初的问题中没有提到，出于给出的原因，我希望避免使用
.bind（This）
（参见“Way#2”）。在Tay的帮助下，我能够在不使用
.bind（This）的情况下重写我的
。谢谢你，布拉德，这很聪明。你在第7行缺少一个
）
，应该在
：obj
之后，但这是一个很好的解决方案。我修改了我的，以便其他人可以看到这是如何解决问题的。布拉德，还想让你知道，我选择了泰伊的解决方案，而不是你的，因为他使用了
索引例如，在数组中的多个对象可能共享同一名称的情况下，可能会出现ps问题。
toggle = (nameYouWantChanged, nameYouWantItChangedTo) => {

  this.setState({
    names: this.state.names.map(obj => 
      obj.name === nameYouWantChanged
        ? { name: nameYouWantItChangedTo }
        : obj
    )
  })

}

toggle = (index, newname) => {
    this.setState((prevState, props) => ({
        // Return new array, do not mutate previous state.
        names: [
            ...prevState.names.slice(0, index),
            { name: newname },
            ...prevState.names.slice(index + 1),
        ],
    }));
}

render() {
    const names = this.state.names.map((name, index) => (
        // Need to bind the index so callback knows which item needs to be changed.
        <Card key={index} change={this.toggle.bind(this, index)} {...name} />
    ))

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