React-Tabulator组件在超过1个实例时崩溃

Question

我有一个在其内部呈现react-tabulator组件的组件。

[如果我尝试渲染此组件的2个实例，那么当在目标应用程序中多次实例化包装器组件时，Tabulator会在Storybook中引发错误并返回相同的错误，但对于'setColumns'而不是'destroy'。]

TypeError: Cannot read property 'destroy' of null
    at default_1.push../node_modules/react-tabulator/lib/ReactTabulator.js.default_1.componentWillUnmount (http://localhost:6006/vendors~main.72ccccb1e4a331ed682e.bundle.js:231022:20)
    at callComponentWillUnmountWithTimer (http://localhost:6006/vendors~main.72ccccb1e4a331ed682e.bundle.js:214466:12)
    at HTMLUnknownElement.callCallback (http://localhost:6006/vendors~main.72ccccb1e4a331ed682e.bundle.js:195074:14)
    at Object.invokeGuardedCallbackDev (http://localhost:6006/vendors~main.72ccccb1e4a331ed682e.bundle.js:195123:16)
    at invokeGuardedCallback (http://localhost:6006/vendors~main.72ccccb1e4a331ed682e.bundle.js:195178:31)
    at safelyCallComponentWillUnmount (http://localhost:6006/vendors~main.72ccccb1e4a331ed682e.bundle.js:214473:5)
    at commitUnmount (http://localhost:6006/vendors~main.72ccccb1e4a331ed682e.bundle.js:214995:11)
    at commitNestedUnmounts (http://localhost:6006/vendors~main.72ccccb1e4a331ed682e.bundle.js:215049:5)
    at unmountHostComponents (http://localhost:6006/vendors~main.72ccccb1e4a331ed682e.bundle.js:215329:7)
    at commitDeletion (http://localhost:6006/vendors~main.72ccccb1e4a331ed682e.bundle.js:215386:5)
例如，我在Storybook中的不同环境中尝试过此操作：

export const BasicTable = () => (
    <>
        <Table isEditable={true} data={data} schema={schemaSmall} />
        <Table isEditable={true} data={data} schema={schemaSmall} />
    </>
);
模式或数据没有问题，因为只有一个实例时，两者都可以正确呈现。

包装器组件是一个React功能组件，它利用useRef钩子来引用React-Tabulator实例，这两个钩子引用是否可能发生冲突？

这来自一个相当大的组件，但来自Table.jsx的（IMO）相关部分是：

import 'react-tabulator/lib/styles.css';
import 'react-tabulator/lib/css/tabulator.min.css';
import { reactFormatter, ReactTabulator } from 'react-tabulator';

const Table = ({
    data,
    schema,
}) => {
    const ref = useRef();
    const options = {
       history: true,
       layoutColumnsOnNewData: true,
       virtualDom: false,
   };
   return (
      <StyledWrapper style={{ width }}>
        <ReactTabulator
            ref={ref}
            columns={tableColumns}
            data={filteredData}
            options={options}
        />
       </StyledWrapper>
   );
};
注意：如果使用单数形式，则Table.jsx组件在两种环境下均无错误。NITE：Table.jsx组件可以与原始React-Tabulator组件的多个实例一起正常工作。

如果是useRef挂钩，那么有没有解决的办法？我看不到此失败的任何其他可能原因

更新：：我通过复制Table.jsx组件中的react-tabulator实例来测试useRef理论，并为每个实例提供不同的ref：

const ref = useRef();
const ref1 = useRef();
但是这仍然不起作用，并且对一个Table.jsx实例抛出了相同的错误。 （而且无论如何都无法解决该问题，因为需要未知数量的实例化。）

我有一个在其内部呈现react-tabulator组件的组件。如果我尝试渲染此组件的2个实例，则Tabulator在Storybook中时会引发错误，并且会出现相同的错误，但是...

Answer 1

首先，我认为ref道具没有任何作用。我查看了react-tabulator的源代码，它只是未使用的。因此useRef()不应造成任何伤害。