Как обновить значение конкретного ключа в массиве объектов в реагирующем состоянии?

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

попробуйте обновить ваш метод 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})
  }));
}

Answer 2

Заменить это:

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