Javascript 如何使用状态更新React js中的对象数组

我只想更新一个对象的值，但更新一个对象的值时，会更新所有对象的值

let default = {
    name: '',
    age: ''
}
this.state = {
    values: Array(2).fill(default)
}

updateName (event) {
    let index = event.target.id,
    values = this.state.values;

    values[index].name = event.target.value;

    this.setState ({
        values: values
    });
}

---

该代码中有四个重要问题

对数组中的所有条目使用相同的对象。如果希望有不同的对象，则必须创建默认对象的多个副本

你打错了setState。任何时候基于现有状态设置状态，并且间接基于this.state.values设置值，都必须使用setState的函数回调版本。更多：

您不能直接修改保存在此.state.values中的对象；相反，您必须创建对象的副本并对其进行修改。更多：

默认值为，即使当前未使用，也不能将其用作标识符。让我们改用defaultValue

这里有一种方法可以解决这三个问题，请参见备注：

// #4 - `default` is a keyword
let defaultValue = {
    name: '',
    age: ''
};
this.state = {
    // #1 - copy default, don't use it directly
    values: [
        Object.assign({}, defaultValue),
        Object.assign({}, defaultValue)
    ] // <=== Side note - no ; here!
}

updateName (event) {
    let index = event.target.id,
    // #2 - state updates working from current state MUST use
    // the function callback version of setState
    this.setState(prevState => {
        // #3 - don't modify state directly - copy the array...
        values = prevState.values.slice();

        // ...and the object, doing the update
        values[index] = {...values[index], name: event.target.value};

        return {values};
    });
}

…使用的语法来自，目前处于第4阶段，它将在ES2018快照规范中，并且通常在React构建环境中启用。

我将结合以下功能使用该功能：

注意，我将默认对象的名称更改为obj。 违约是一种风险

---

有一种简单而安全的方法可以通过以下方式实现：

this.setState({
  values: [ newObject, ...this.state.values],
});

---

这将创建状态实例，并使用新对象更改现有对象的值。

欢迎使用堆栈溢出！请拿着这本书，环顾四周，通读一遍，特别是请尽可能清楚地了解你想做什么，你看到了什么，以及为什么这会令人惊讶。现在还不清楚。在可能的情况下，包括演示问题的示例，理想情况下是使用[]工具栏按钮上的堆栈片段运行的示例。堆栈代码段支持React，包括JSX。使用参照复制对象。所以数组中的两个值都指向同一个对象。而是使用内联对象或使用object.assign{}，defaultState。默认值不是一个好的变量名。试着说得具体一点如果下面的任何答案回答了您的问题（堆栈溢出的工作方式），您可以通过单击旁边的复选标记来接受答案。但前提是你的问题得到了回答；如果不是，考虑在问题中添加更多的细节，或者在一个答案上发表评论，要求澄清。@ RJES:切片只复制数组，数组中的对象仍然与状态共享。在修改对象之前，我们也必须复制它。这是对默认值的好理解。它不仅仅是保留的。

let obj = {
    name: '',
    age: ''
}
this.state = {
    values: Array(2).fill(obj)
}

updateName(event){
    const {id, value} = event.target;  
    this.setState(prev => {
    const {values} = prev;

    const nextState = values.map((o,idx) => {
        if(idx !== id)
        return o; // not our object, return as is

      return{
          ...o,
          name: value;
        }
    });

      return{
        values: nextState
      }
    });
}

this.setState({
  values: [ newObject, ...this.state.values],
});