如何选择反应虚拟表中的行中的复选框？

Question

我已经使用react-virtualized Table组件实现了Table。我在表中添加了一个复选框列，现在想使用这些复选框来实现全选/选择行功能。

现在，要添加全选/选择行功能，我正在使用React钩子来更改checked的CheckBox道具，但似乎不起作用。下面是代码链接，当我向下滚动带有实际数据的页面时，复选框已选中状态被删除。

这是我要执行的代码，checked对于标题以外的行始终保持为false。标头全选功能正常

...
import {Checkbox} from 'semantic-ui-react';
const[selectAll, setSelectAll] = useState(false):
const checked = [];
function _checkboxState(data) {
    if (checked.includes(data.index)) {
      checked.pop(data.index);
    } else {
      checked.push(data.index);
    }
  }
<Column
    disableSort
    dataKey="checkbox"
    width={30}
    headerRenderer={() => (
      <Checkbox
        checked={selectAll}
        onChange={() => {
          if (selectAll === true) {
            setSelectAll(false);
          } else {
            setSelectAll(true);
          }
        }}
      />
    )}
    cellRenderer={({rowIndex}) => (
      <Checkbox
        checked={selectAll || checked.includes(rowIndex)}
        onChange={(e, data) => {
          _checkboxState(data);
        }}
        index={rowIndex}
      />
    )}
/>
...

1. 甚至在滚动表后如何保持检查？
2. 在检查单个行时我做错了什么？

对此有任何帮助，感激不尽！

Answer 1

[与此同时，我在等待答案时，我花了更多时间，发现我在对checked进行突变，而不使用useState钩子。

这是更新的代码：

.....
const [checked, setChecked] = useState([]);

function _onChangeHeaderCheckbox(data) {
  data.checked
    ? ssetChecked(sortedList.map(row => row.id))
    : setChecked([])
}

function _onChangeRowCheckbox(data) {
  const newRow = sortedList[data.index].id;
  checked.includes(newRow)
    ? setChecked(old => old.filter(row => row !== newRow))
    : setChecked(old => [...old, newRow])
}

....
<Column
  disableSort
  dataKey="checkbox"
  width={30}
  headerRenderer={() => (
    <Checkbox
      indeterminate={checked.length > 0 && checked.length < sortedList.length}
      checked={checked.length === sortedList.length}
      onChange={(e, data) => {
        _onChangeHeaderCheckbox(data);
      }}
    />
  )}
  cellRenderer={({rowIndex}) => (
    <Checkbox
      checked={checked.includes(sortedList[rowIndex].id)}
      onChange={(e, data) => {
        _onChangeRowCheckbox(data);
      }}
      index={rowIndex}
    />
  )}
/>
....

这是带有伪数据的工作预览：