reactjs - react 表中的冒泡选择

Question

我试图将我的 react-table 组件中的当前选择传递给父级，以便在发生选择时执行一些逻辑，但我似乎无法找到一种可靠地获得选择的方法。我尝试了以下方法:

function Table({ columns: userColumns, data, setSelection }) {
  const {
      ...,
      selectedFlatRows,
    } = useTable(
      {
        ...
      },
       ...,
      useRowSelect,
      (hooks) => {...})

  useEffect(() => {

      // Bubble up the selection to the parent component
      setSelection(selectedFlatRows.map((row) => row.original));
   }, [selectedFlatRows]);

但上面只是创建了一个无限循环。我已经根据指南构建了表选择 given in the docs ，但它们似乎没有涵盖如何可靠地获取所选行。

Answer 1

虽然 rotimi-best 的回答是正确的，但它并没有解决我的问题。我有一个包含功能组件，需要了解选择。我的结构如下:

<Container> // This container needs to know about the selection.
   <Table
      columns={columns}
      data={data}
      setSelection={(selection) => handleSetSelection(selection)} // Passed down to the table instance
   />
</Container>

解决方案是包装顶层 setSelection在 useCallback 中。这与使用 react-table 文档概述的内存功能一起解决了这个问题。

Container:
...
const [selection, setSelection] = useState([]);
const selectionCallback = React.useCallback((ids) => setSelection(ids), [
    setSelection,
  ]);