Сопоставление идентификаторов флажков для возврата связанных свойств

Question

У меня есть таблица с флажками, с каждым из которых связан идентификатор.Когда этот флажок установлен, он ищет идентификатор и возвращает другие свойства, связанные с этим идентификатором.Это затем обновляет состояние.

Все хорошо, кроме случаев, когда я нажимаю на другой флажок!Исходный объект в моем массиве становится неопределенным, но второй объект возвращает правильный.На третьем щелчке я не могу ничего сделать, поскольку он ломается в этот момент.

https://codesandbox.io/s/18xorzw46q

Вот мой обработчик щелчков:

  handleCheckboxClick = (event, id, name) => {
    event.stopPropagation();

    const { selected, selectedDialog } = this.state;
    const selectedIndex = selected.indexOf(id);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, { id, name });
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        selected.slice(0, selectedIndex),
        selected.slice(selectedIndex + 1)
      );
    }

    console.log("selectedDialog", newSelected);
    this.setState({
      selected: newSelected.map(n => n.playerId),
      selectedDialog: newSelected.map(({ id, name }) => ({ id, name }))
    });

  };

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

0: {id: "14", name: "bob"}

, затем при втором выборе другого флажка:

0: undefined
1: {id: "15", name: "tyler"}

Вот демонстрация: https://codesandbox.io/s/18xorzw46q

Answer 1

Ваша логика кода слишком запутана, поэтому она скрыла от вас ошибку.

Вы используете newSelected и this.state.selected в качестве массива id и массива {id, name} (не говоря уже о неизвестном n.playerId).Я не уверен, какой формат вам нужен, но попробуйте упростить ваш код:

handleCheckboxClick = (event, id, name) => {
    event.stopPropagation();

    const { selected, selectedDialog } = this.state;
    const isSelected = selected.includes(id);
    const newSelected = isSelected
      ? selected.filter(item => item !== id)
      : [...selected, id];
    const newSelectedDialog = isSelected
      ? selectedDialog.filter(item => item.id !== id)
      : [...selectedDialog, { id, name }];

    console.log("selectedDialog", newSelected);
    this.setState({
      selected: newSelected,
      selectedDialog: newSelectedDialog
    });
  };

https://codesandbox.io/s/0q5ox9ll1w