单击复选框不会立即选中复选框

Question

当我单击 table 行的复选框时，我正在使用 id 更新数组 selecteddata ，然后我通过查找 id 是否存在于 selecteddata 中来检查复选框来传递检查的值。我能够将 id 存储在 selectedData 中，但它没有在复选框中显示实例更改。

const [selectedData, setSeletcedData] = useState([]);

  const handleCheckboxSelect = (id) => {
    setHasSelectedAll(false);
    setSeletcedData((selectedData) => {
      if (selectedData.includes(id)) {
        return selectedData.filter((currentId) => id !== currentId);
      } else {
        selectedData.push(id);
        return selectedData;
      }
    });
  };



<CDataTable
          items={matter}
          fields={fields}
          hover
          pagination
            count: (item) => (
              <CFormGroup variant="checkbox" className="checkbox">
                <CInputCheckbox
                  id="checkbox1"
                  name="checkbox1"
                  value="option1"
                  checked={selectedData.includes(item.id)}
                  onChange={(e) => handleCheckboxSelect(item.id)}
                />
              </CFormGroup>
            ),
          }}
        />

Answer 1

用spread operator代替return新数组push

else {
  return [...selectedData, id];
}

Answer 2

您return在行

中引用相同的数组

selectedData.push(id);
return selectedData;

这不会导致组件重新呈现，您应该 return 一个包含新项目的新数组，使用 spread operator 或 Array Cloning

spread operator :

     return [...selectedData,id];

Cloning :

     const newArray = Array.from(selectedData);
     newArray.push(id);
     return newArray;

单击复选框不会立即选中复选框

Click on checkbox is not checking checkbox instantly

reactjs

react-table