时间戳

首页 > 解决方案 > 映射复选框 id 以返回相关属性

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

问题描述

我有一个带有复选框的表，每个框都有一个与之关联的 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

标签： javascriptreactjsmapping

解决方案

你的代码逻辑太纠结了，所以它对你隐藏了错误。

您正在使用newSelectedandthis.state.selected作为数组id和数组{id, name}（更不用说 unknown 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

推荐阅读