Question

我有一个奇怪的问题，试图使react-dropzone库在我的项目中运行。我正在使用带有Typescript的React和带有mobx-react-lite的Mobx，它们都是最新的稳定版本。

将文件拖放到dropzone时出现以下错误

渲染的钩子比预期的要少。这可能是由于意外的提前归还声明引起的。

在堆栈跟踪指向以下代码段的第4行的情况下，UIStore.setActiveCode(code);部分将调用mobx动作。该代码几乎全部取自react-dropzone示例。

export function CodeDropzone() {
  const onDrop = useCallback(async acceptedFiles => {
    const code = await uploadCodeFiles(acceptedFiles);
    UIStore.setActiveCode(code);
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <DropzoneContainer {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>Drop the files here ...</p>
      ) : (
        <p>Drag 'n' drop some files here, or click to select files</p>
      )}
    </DropzoneContainer>
  );
}

由于添加了Dropzone组件，我只有一个上载函数，它使用普通的输入表单字段，并且可以调用相同的代码，因此我只会收到此错误。我很难再进一步缩小问题的范围，尤其是由于堆栈跟踪根本无法帮助我，我不知道为什么它指向这一特定行。

UIStore的相关部分如下

export class UIStore {

  @action
  setActiveCode(code: ICode | null) {
    this.activeCode = code;
  }

  @observable.ref
  activeCode: ICode | null = null;
}

setActiveCode函数设置一个Observable，然后由以下组件使用：

const StaticCodeViewer = observer(
  ({
    UIStore: { activeCode }
  }: IProps) => {
    if (activeCode) {
      return (
        <CodeViewer
          activeCode={activeCode}
        />
      );
    } else return CodeDropzone();
  }
);

如果未设置activeCode，则此组件将渲染Dropzone，并一旦显示就切换为显示CodeViewer组件。

该错误的完整堆栈跟踪为

invariant
[...]/node_modules/react-dom/cjs/react-dom.development.js:57
renderWithHooks
[...]/node_modules/react-dom/cjs/react-dom.development.js:13506
updateFunctionComponent
[...]/node_modules/react-dom/cjs/react-dom.development.js:15199
updateSimpleMemoComponent
[...]/node_modules/react-dom/cjs/react-dom.development.js:15144
beginWork
[...]/node_modules/react-dom/cjs/react-dom.development.js:16328
performUnitOfWork
[...]/node_modules/react-dom/cjs/react-dom.development.js:20279
workLoop
[...]/node_modules/react-dom/cjs/react-dom.development.js:20320
HTMLUnknownElement.callCallback
[...]/node_modules/react-dom/cjs/react-dom.development.js:147
invokeGuardedCallbackDev
[...]/node_modules/react-dom/cjs/react-dom.development.js:196
invokeGuardedCallback
[...]/node_modules/react-dom/cjs/react-dom.development.js:250
replayUnitOfWork
[...]/node_modules/react-dom/cjs/react-dom.development.js:19503
renderRoot
[...]/node_modules/react-dom/cjs/react-dom.development.js:20433
performWorkOnRoot
[...]/node_modules/react-dom/cjs/react-dom.development.js:21357
performWork
[...]/node_modules/react-dom/cjs/react-dom.development.js:21267
performSyncWork
[...]/node_modules/react-dom/cjs/react-dom.development.js:21241
requestWork
[...]/node_modules/react-dom/cjs/react-dom.development.js:21096
scheduleWork
[...]/node_modules/react-dom/cjs/react-dom.development.js:20909
dispatchAction
[...]/node_modules/react-dom/cjs/react-dom.development.js:14118
(anonymous function)
[...]/node_modules/mobx-react-lite/dist/index.module.js:179
Reaction.onInvalidate
[...]/node_modules/mobx-react-lite/dist/index.module.js:216
Reaction.runReaction
[...]/node_modules/mobx/lib/mobx.module.js:1884
runReactionsHelper
[...]/node_modules/mobx/lib/mobx.module.js:2047
reactionScheduler
[...]/node_modules/mobx/lib/mobx.module.js:2023
runReactions
[...]/node_modules/mobx/lib/mobx.module.js:2029
endBatch
[...]/node_modules/mobx/lib/mobx.module.js:1681
endAction
[...]/node_modules/mobx/lib/mobx.module.js:747
executeAction
[...]/node_modules/mobx/lib/mobx.module.js:712
UIStore.res
[...]/node_modules/mobx/lib/mobx.module.js:691
(anonymous function)
[...]/src/components/CodeDropzone.tsx:28

我现在最好的猜测是，这是由mobx和react-dropzone之间的某些怪异相互作用引起的，但是我真的很困惑。对于这些项目，我找不到任何报告的此类问题。

关于错误原因可能有什么想法？或至少有一些迹象表明我必须进一步寻找调试的地方？

“提供的钩子比预期的要少。” mobx使用react-dropzone时出错

0 个答案: