映射状态时如何重新呈现复选框状态答案

【问题标题】：How to re-render checkbox state when mapping over state映射状态时如何重新呈现复选框状态
【发布时间】：2021-09-17 08:21:14
【问题描述】：

我有一个可以选择多个复选框的组件。对于每个选中的复选框，都会生成一个说明选中复选框的芯片。这些芯片有一个删除处理程序，可以删除选择（就像复选框本身9。到目前为止这有效，但是如果我使用芯片来删除选择，则不会调整相应复选框的状态。

我做错了什么？

这是我的复选框的渲染（简化）：

  {filteredData(data)?.map((data, index) => (
    <CheckBox
     // some other props
     selected={selected.includes(data.id)}
     onChange={() => handleState(data.id)}
    />
  ))}

这是我的芯片的渲染图：

{selected.map((checkbox) => (
  <Chip
    onDelete={() => handleState(checkbox.id, true)}
  />
 ))}

这里是处理方法：

  const [selected, setSelected] = useState([]);

  const handleState = (id: string, withC?: boolean): void => {
    const selectedCB = [...selected];
    const index = selectedCB.findIndex((item) => item.id === id);

    if (index > -1 || withC) {
      selectedCB.splice(index, 1);
    } else {
      selectedCB.push(data.find((item) => item.id === id));
    }
    setSelected(selectedCB);
  };

【问题讨论】：

标签： javascript reactjs typescript react-hooks react-state

【解决方案1】：

您遇到了复选框selected 条件的问题。以下行：

     selected={selected.includes(data.id)}

注意selected 是一个对象数组，因此用data.id 检查includes() 将不起作用。将您选择的逻辑替换为

     selected={selected.find(cb => cb.id === data.id)

应该可以了！

【讨论】：

谢谢，它有效 :) - selected.includes(data) 也有效。这里不需要 id。