Question

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

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

这是我的点击处理程序：

    string ip = gameObject.text;
    string[] ipStringArr = ip.Split('.');
    int[] ipIntArr = new int[ipStringArr.Length];
    if (ipIntArr.Length != 4)
    {
        //error
    }
    else
    {
        for (int i = 0; i < ipStringArr.Length; i++)
        {
            ipIntArr[i] = Int32.Parse(ipStringArr[i]);
            if (ipIntArr[i] < 0 || ipIntArr[i] > 255)
            {
                //error
            }
        }
    }

我在那里有一个控制台日志，以演示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"}

这里是演示：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

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

1 个答案: