如何在反應狀態下更新對象數組中特定鍵的值？

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