Question

我想只更新一个对象的值，但更新一个Object的值，更新所有对象的值。

test_Account

Answer 1

该代码中存在四个重要问题。

您对阵列中的所有条目使用相同对象。如果您想拥有不同的对象，则必须创建默认的多个副本。
您正在正确调用setState。每当您根据现有状态设置状态时（并且您基于values间接设置this.state.values），必须使用{的函数回调版本{1}}。更多：State Updates May Be Asynchronous
您无法直接修改setState中保留的对象;相反，您必须创建对象的副本并进行修改。更多：Do Not Modify State Directly
this.state.values是keyword（即使它当前未使用），您也不能将其用作标识符。我们改用default。

以下是解决这三种问题的一种方法（见评论）：

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};
    });
}

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

Answer 2

我会将Array.prototype.map功能与object spread syntax (stage 4)：

组合使用

请注意，我将default对象的名称更改为obj default是reserved key word in javascript

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
      }
    });
}

Answer 3

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

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

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

如何使用state更新React js中的对象数组

3 个答案: