面临未处理的拒绝（错误）：无效的挂钩调用。挂钩只能在功能组件的主体内部调用

Question

我在React中创建一个项目，遇到了“ 未处理的拒绝（错误）：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2.您可能违反了《钩子规则》 3.您可能在同一应用程序中拥有多个React副本

我尽力自行修复，但没有结果，因此我真的需要您的帮助。这是我的代码：

import React, { useState, useReducer, useEffect } from "react";
import { useDropzone } from "react-dropzone";
import { Button } from "@material-ui/core";
import styles from "./dropZone.module.css";
import { useSelector, useDispatch } from "react-redux";
import { ReactComponent as ReactLogo } from "../../assets/plan.svg";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import { ADD } from "../../store/actionTypes/actionTypes";
import { ReactCanvasAnnotation, LABEL_TYPE } from "react-canvas-annotation";

function DropZone(props) {
  const fileSelector = useSelector((state) => state.fileReducer.file);
  const isEditMode = useSelector((state) => state.editReducer.isEditMode);
  const [annotationType, setAnnotationType] = useState(null);
  const [labels, setLabels] = useState(null);

  const dispatch = useDispatch();
  const {
    fileRejections,
    isDragReject,
    isDragActive,
    getRootProps,
    getInputProps,
  } = useDropzone({
    accept: "image/jpeg, image/png",
    onDrop: (acceptedFiles) => {
      dispatch({
        type: ADD,
        payload: acceptedFiles.map((file) =>
          Object.assign(file, {
            preview: URL.createObjectURL(file),
          })
        ),
      });
    },
  });

  const onConsole = (msg) => (id) => console.info(msg, id);

  const thumbs = fileSelector.map((file) => (
    <div key={file.name}>
      <img className={styles.uploadedImage} src={file.preview} />
    </div>
  ));

  useEffect(
    () => () => {
      // Make sure to revoke the data uris to avoid memory leaks
      fileSelector.forEach((file) => URL.revokeObjectURL(file.preview));
    },
    [fileSelector]
  );

  const isFileTooLarge =
    fileRejections.length > 0 && fileRejections[0].size > props.maxSize;

  return (
    <section className={styles.container}>
      {isEditMode && (
        <>
          <TransformWrapper>
            {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
              <>
                <Button
                  className={styles.zoomIn}
                  variant="contained"
                  color="primary"
                  onClick={zoomIn}
                >
                  Zoom in
                </Button>
                <Button
                  className={styles.zoomOut}
                  variant="contained"
                  color="secondary"
                  onClick={zoomOut}
                >
                  Zoom out
                </Button>
                <Button
                  className={styles.reset}
                  variant="contained"
                  onClick={resetTransform}
                >
                  x
                </Button>

                <TransformComponent>
                  <div {...getRootProps({ className: styles.dropZone })}>
                    {fileSelector.length > 0 && <div>{thumbs}</div>}
                  </div>
                </TransformComponent>
              </>
            )}
          </TransformWrapper>
        </>
      )}

      {fileSelector.length > 0 && !isEditMode && (
        <>
          <ReactCanvasAnnotation
            imageFile={thumbs}
            labels={labels}
            onChange={setLabels}
            annotationType={annotationType}
            onMouseOut={onConsole(`onMouseOut`)}
            onHover={onConsole(`onHover`)}
            onClick={onConsole(`onClick`)}
          />

          <div {...getRootProps({ className: styles.dropZone })}>
            {fileSelector.length > 0 && <div>{thumbs}</div>}
          </div>
        </>
      )}

      {fileSelector.length === 0 && (
        <div {...getRootProps({ className: styles.dropZone })}>
          {fileSelector.length === 0 && !isEditMode && (
            <input {...getInputProps()} />
          )}
          {fileSelector.length === 0 && (
            <div>
              <span>{isDragActive ? <ReactLogo /> : <ReactLogo />}</span>
              <h3>Click Yellow zone or drop an image to upload!</h3>
            </div>
          )}
          {isDragReject && <h3>This file type not supported, sorry!</h3>}
          {isDragActive && !isDragReject && <h3>Drop it AS IF it's hot!</h3>}
          {isFileTooLarge && <div>File is too large.</div>}
          {fileRejections.length > 0 && "File not supported"}
        </div>
      )}
    </section>
  );
}

export default DropZone;