将 react-table 与 react-modal 一起使用

Question

我不明白为什么我不能使用 react-table with react-modal or react-aria-modal。当我尝试显示模态时，显示 react-table 的组件不断重新渲染，并最终因 Maximum update depth 错误而崩溃。

我创建了一个 CodeSandbox 来说明这个问题。有没有办法在同一棵树中使用这两个组件？

CodeSandbox 出于某种原因没有显示此错误，但在开发中我也遇到此错误（这些堆栈跟踪似乎来自 react-table）：

(anonymous function)
/src/hooks/useColumnVisibility.js:207
  204 | 
  205 | useMountedLayoutEffect(() => {
  206 |   if (getAutoResetHiddenColumns()) {
> 207 |     dispatch({ type: actions.resetHiddenColumns })
      | ^  208 |   }
  209 | }, [dispatch, columns])
  210 | 

(anonymous function)
/src/publicUtils.js:153
  150 | 
  151 | safeUseLayoutEffect(() => {
  152 |   if (mountedRef.current) {
> 153 |     fn()
      | ^  154 |   }
  155 |   mountedRef.current = true
  156 |   // eslint-disable-next-line

Answer 1

你需要记住这些选项，react-table 提到了 in some of its documentation。选项包括您当前未记忆的列，因此它会在每次渲染时获取新列（因为列定义在与数组相同的范围内并且 [] !== []），然后重新渲染。

修复它的最快方法是将您的 columns 数据包装在 React.useMemo;

const columns = React.useMemo(() =>[
    {
      Header: "Example",
      Cell: props => <span>no click</span>
    }
  ], []);

将 react-table 与 react-modal 一起使用

Using react-table with react-modal

reactjs

react-modal

react-table