如何更新处于反应状态的对象数组中特定键的值？答案

【问题标题】：How to update value of a specific key in array of objects in react state?如何更新处于反应状态的对象数组中特定键的值？
【发布时间】：2018-12-20 12:27:29
【问题描述】：

我正在创建一个这样的用户角色管理表单：

每当用户选中或取消选中权限时，我都会尝试将其置于状态，以便我可以将其发送到我的后端服务器并更新数据库。

我将状态中的所有行信息存储在componentWillReceiveProps：

componentWillReceiveProps(nextProps){
        if(nextProps.users.items){
            this.setState({
                userobj : nextProps.users.items['users']
            });
            const userarr = []
            nextProps.users.items['users'].map((i) => {     

                userarr.push({"employeeid" : i['employeeid'] , "isadmin": i['isadmin'], "isreports" : i['isreports'], "ischarts": i['ischarts'], "ischathistory": i['ischathistory']})            
            });
            this.setState({"list" : userarr});
        }
    }

现在状态是：

list: Object(4)
    
    0: Object { employeeid: "12345", isadmin: false, isreports: true, …  }
    
    1: Object { employeeid: "12346", isadmin: false, isreports: true, … }
    
    2: Object { employeeid: "12347", isadmin: false, isreports: true, … }
    
    3: {…}

每个复选框都有一个onClick 事件：

<Table.Td>{rows['isadmin'] ? <Checkbox  id={rows['employeeid']} name="isadmin" defaultChecked onChange={this.handleChange}></Checkbox> : <Checkbox  id={rows['employeeid']} name="isadmin" onChange={this.handleChange}></Checkbox>}</Table.Td>

这是handleChange的代码：

handleChange(id) {
        const checked = id.target.checked;
        const empid = id.target.id;
        const name = id.target.name;

        this.setState(prevState => ({
            list: {
              ...prevState.list,
              [this.getIndex(empid, this.state.list, 'employeeid')]: {
                ...prevState[this.getIndex(empid, this.state.list, 'employeeid')],
                [name] : checked
              },
            }
        }));
    }

结果是：

list: Object(4)

0: Object { isadmin: true }

1: Object { employeeid: "12346", isadmin: false, isreports: true, … }

2: Object { employeeid: "12347", isadmin: false, isreports: true, … }

3: {…}

我需要实现的是：

list: Object(4)

0: Object { employeeid: "12345", isadmin: true, isreports: true, …  }

1: Object { employeeid: "12346", isadmin: false, isreports: true, … }

2: Object { employeeid: "12347", isadmin: false, isreports: true, … }

3: {…}

我是 React 和 Redux 的新手。任何帮助表示赞赏。提前致谢。 ☺

【问题讨论】：

标签： javascript reactjs object redux setstate

【解决方案1】：

替换这个：

    this.setState(prevState => ({
            list: {
              ...prevState.list,
              [this.getIndex(empid, this.state.list, 'employeeid')]: {
                ...prevState[this.getIndex(empid, this.state.list, 'employeeid')],
                [name] : checked
              },
            }
        }));

有了这个：

    this.setState(prevState => ({
            list: {
              ...prevState.list,
              [this.getIndex(empid, this.state.list, 'employeeid')]: {
                ...prevState.list[this.getIndex(empid, this.state.list, 'employeeid')],
                [name] : checked
              },
            }
        }));

【讨论】：

第一次给了我想要的结果，当我取消选中同一个复选框时，它正在添加另一个索引为 -1 的对象并更改它而不是实际对象

【解决方案2】：

尝试将您的 handleChange 方法更新为此

    handleChange(id) {
  const checked = id.target.checked;
  const empid = id.target.id;
  const name = id.target.name;

  this.setState(prevState => ({
      let list = prevState.list
      let user = prevState.list.filter(user => user.employeeid == id)
      const userIndex = prevState.list.indexOf(user)
      user = {
        ...user,
        isadmin: true
      }

      list.splice(userIndex, 1)       //remove the old user
      list.splice(userIndex, 0, user) //put the updated user at same index

      this.setState({list})
  }));
}

【讨论】：