映射复选框 ID 以返回相关属性

Question

我有一个带有复选框的表，每个框都有与之关联的ID。当选择该复选框时，它会查找ID并返回与该ID相关的其他属性。然后，这将更新状态。

一切都很好，除非我单击另一个复选框！我的数组中的原始对象变得不确定，但是第二个对象返回正确。在第三次点击时，我在这一点上都无法做任何事情。

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