结合使用react-table和react-modal

Question

我不明白为什么我不能在react-modal或react-aria-modal中使用react-table。当我尝试显示模式时，显示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是在与数组和[] !== []相同的范围内定义的)，然后重新呈现。

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

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