React AG 网格在设置状态以保持所选行后不保存行选择

Question

我在 React 中使用 AG Grid 在表中进行多行选择。我想要在网格外部有一个按钮，该按钮在没有选择行时被禁用，并在至少选择一行后启用。在我尝试将选定的行保存在某种状态之前，行选择工作正常。现在，在我选择该行后，该行立即被取消选择。

这是在选择时运行的代码：

 function handleSelectionChanged(event: any) {
    const selectedData = event.api.getSelectedRows();
    setSelectedComparisons(selectedData);
  }

这是我的状态初始化：

const [selectedComaparisons, setSelectedComparisons] = useState([]);

这是禁用和启用按钮的代码

<MotifButton
          onClick={() => {
            console.log();
          }}
          style={{ width: '220px', marginBottom: '50px'}}
          variant="secondary"
          disabled={selectedComaparisons.length === 0}
        >
          <MotifIcon
            src={actionIcDelete24px}
            style={{ width: '18px', marginRight: '4px' }}
          />
          Delete Comparisons
</MotifButton>

请参阅此处的错误 gif

如果我删除行

setSelectedComparisons(selectedData);

，行选择将正常工作。

Answer 1

我花了一整天的时间来处理这个令人沮丧的问题。终于在ag-Grid网站上找到了答案。

用 useState 包装 rowData。

AG-Grid React 最佳实践