Я хочу, чтобы мое проверенное значение из списка сохранялось в массиве, но оно не дает правильного результата

Question

Я не могу сохранить множественное значение в массиве selectedDepartment, поскольку оно удаляет старое значение и обновляет массив для самого последнего значения.

onClickHandler = (e, DeptId, DeptName) => {
  let selectedDepartment = [];
  selectedDepartment.push(DeptName);
  console.log("selectedDepartment----", selectedDepartment);
  this.setState({
    isChecked: !this.state.isChecked
  });
};

departmentData() {
let departmentList = this.props.departmentData.departments || [];
return departmentList.map((departmentName, index) => {
  return (
    <li className="row" key={index}>
      <div className="col-12 dep-list">
        <div className="row">
          <div className="col-md-9">
            <div
              className="user-name"
              title={departmentName.departmentName}
            >
              {departmentName.departmentName}
            </div>
          </div>
          <div className="col-md-3 mt-rd-btn">
             <RadioButton
                // checked={this.state.isChecked}
                id={departmentName.dObjectId}
                type="radio"
                name={departmentName.departmentName}
                value={departmentName.departmentName}
                onClick={e =>
                  this.onClickHandler(
                    e,
                    departmentName.dObjectId,
                    departmentName.departmentName
                  )
                }
              />
            </div>
          </div>
        </div>
     </li>
    );
  });
}

Заранее спасибо.Помоги мне с этим

Answer 1

 constructor(props) {
    super(props);
    this.state = {
      selectedDepartment: []
    };
  }

  onClickHandler = (e, DeptId, DeptName) => {
    let x = DeptName;
    let selectedDepartment =
      JSON.parse(JSON.stringify(this.state.selectedDepartment)) || [];
    if (selectedDepartment.indexOf(DeptName) === -1) {
      selectedDepartment.push(x);
    } else if (selectedDepartment.indexOf(DeptName) !== -1) {
      selectedDepartment.splice(selectedDepartment.indexOf(DeptName), 1);
    }
    console.log("data here in array----", selectedDepartment);
    this.setState({
      selectedDepartment
    });
  };

Answer 2

Я не проверил код полностью, но ваша основная функция onClickHandler страдает фундаментальной базовой проблемой.

Вы назначаете новую временную переменную при каждом вызове функции, и вы нажимаете выбранный объектво временную переменную.Таким образом, по сути вы создаете новый экземпляр каждый раз и просто помещаете выбранное значение в эту переменную.

Что вам действительно нужно сделать, так это извлечь старые значения из переменной и затем нажать выбранное значение.Что-то на линии ..

onClickHandler(..., DeptName) {
     let currentList = this.departmentList;
     currentList.push(DeptName);
     this.departmentList = currentList;
}

Это должно решить вашу проблему