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

Question

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

一切正常，除非我点击另一个复选框!我数组中的原始对象变为未定义，但第二个对象返回正确。在第 3 次单击时，我无法执行任何操作，因为此时它已中断。

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