«Оказано меньше крючков, чем ожидалось». ошибка при использовании реакции-dropzone с MOBX - PullRequest
Новая
       14

«Оказано меньше крючков, чем ожидалось». ошибка при использовании реакции-dropzone с MOBX

0 голосов
/ 22 июня 2019

У меня странная проблема, связанная с попыткой заставить библиотеку реагировать на сбрасывание зон внутри моего проекта. Я использую React с Typescript и Mobx с MOBX-реагировать-Lite, все в новейшей стабильной версии.

Я получаю следующую ошибку при удалении файла в dropzone

Оказано меньше крючков, чем ожидалось. Это может быть вызвано случайным ранним возвратом.

С помощью трассировки стека, указывающей на строку 4 следующего фрагмента кода, часть UIStore.setActiveCode(code);, которая вызывает действие mobx. Код почти полностью взят из примеров реагирующей зоны сброса. 

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();
  }
);

Этот компонент визуализирует Dropzone, если activeCode не установлен, и переключается на отображение компонента 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 и response-dropzone, но я действительно озадачен здесь. Я не смог найти ни одной подобной проблемы для этих проектов.

Любые идеи о том, что может быть источником ошибки? Или хотя бы какое-то указание на то, где именно я должен искать дальше, чтобы отладить это?

...