如何在反应状态下更新对象数组中特定键的值？

Question

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

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

我将所有行信息都存储在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的新手。 任何帮助表示赞赏。 提前致谢。 ☺

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

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