代码之家 › 专栏 › 技术社区 › BrDaHa

将react表与react model一起使用

react-modal react-table reactjs

0

BrDaHa · 技术社区 · 4 年前

我不明白为什么我不能使用 react-table 具有 react-modal 或 react-aria-modal .当我试图显示模式时,显示react表的组件会不断重新呈现,最终由于 Maximum update depth 错误

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

CodeSandbox由于某些原因没有显示这个错误,但在开发过程中我也遇到了这个错误(这些堆栈跟踪似乎来自react表):

(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

0 回复 | 直到 4 年前

1

2

Shawn Patrick Rice 4 年前

你需要记住表格中提到的选项 in some of its documentation 。选项包括当前未记忆的列,因此它在每次渲染时都会获得新列(因为列与数组和数组定义在同一范围内) [] !== [] ),然后重新渲染。

解决这个问题最快的方法就是把你的头发包起来 columns 数据存储在 React.useMemo ;

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