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

Question

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

我做错了什么？

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

  {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);
  };

Answer 1

复选框 selected 条件有问题。下面一行：

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

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

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

应该有用！

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

How to re-render checkbox state when mapping over state

javascript

reactjs

typescript

react-hooks

react-state