反应无效的挂钩呼叫

Question

我是React的新手，我找到了一个关于我的项目的示例，我正在尝试运行它，但是我得到了 “无效的钩子调用。只能在功能组件的主体内部调用钩子。这可能是由于以下原因之一导致的： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2.您可能违反了《钩子规则》 3.您可能在同一应用程序中拥有多个React副本”

我在互联网上寻找了一些解释，但它们与我的代码不匹配。那么我的代码有什么问题呢？

    getProduct = (response, allBarcodes) => {
    const context = this;
    let buffer = [];
    axios({
      method: "post",
      url: "/productImages",
      data: { barcode: allBarcodes },
      config: { headers: { "Content-Type": "multipart/form-data" } }
    })
      .then(function(response) {
        console.log(response);
        buffer.push(<p>Search Result:</p>);
        buffer.push(<br />);
        response.data.map(data => {
          console.log(data);
          data.map(data => {
            buffer.push(
              <Link to={"details/" + data.BARCODE}>
                <img
                  className="similarProduct"
                  src={data.IMAGELINK.split("||")
                    .reverse()
                    .pop()}
                />
              </Link>
            );

            context.setState({ message: buffer });
          });
        });
      })
      .catch(function(response) {
        console.log(response);
        context.setState({ message: "Please try again" });
      });
  };

  getSearchItem = id => {
    const context = this;
    context.setState({ message: "Searching..." });
    axios({
      method: "post",
      url: "/searchSelectedItem",
      data: {
        img_url: this.state.coordinate[id].img,
        coordinate: this.state.coordinate[id]
      },
      config: { headers: { "Content-Type": "multipart/form-data" } }
    })
      .then(function(response) {
        console.log(response);
        let allBarcodes = "";
        response.data.map(
          data => (allBarcodes += data.product.productLabels[3].value + ",")
        );
        context.getProduct(response, allBarcodes);
      })
      .catch(function(response) {
        console.log(response);
      });
  };

  onDrop = files => {
    this.setState({
      message: "Loading...",
      image: "",
      firstItemCoordinate: {},
      files
    });
    let file = new FormData();
    file.append("file", files[0]);
    const context = this;
    axios({
      method: "post",
      url: "/boundingBox",
      data: file,
      config: { headers: { "Content-Type": "multipart/form-data" } }
    })
      .then(function(response) {
        if (response.status !== 400) {
          context.setState({ coordinate: response.data });
          context.state.coordinate.map(coordinate =>
            context.setState({ firstItemCoordinate: coordinate })
          );
          console.log(context.firstItemCoordinate);
          context.setState({ message: "" });

          let image = new window.Image();
          image.src = context.state.firstItemCoordinate.img;
          image.onload = () => {
            context.setState({
              image: image
            });
          };

          if (context.state.coordinate.length === 0) {
            context.setState({ message: "Object not found" });
          }
        } else {
          context.setState({ message: "Please try again" });
        }
      })
      .catch(function(response) {
        context.setState({ message: "Please try again..." });
      });
  };

  render() {
    return (
      <div>
        <Dropzone
          onDrop={this.onDrop}
          accept="image/png, image/gif, image/jpg, image/jpeg"
        >
          {({ getRootProps, getInputProps }) => (
            <section>
              <div {...getRootProps({ className: "dropzone" })}>
                <input {...getInputProps()} />
                <button className="btn">Upload</button>
              </div>
            </section>
          )}
        </Dropzone>
        <h3>{this.state.message}</h3>
        <Stage
          width={this.state.firstItemCoordinate.imgW}
          height={this.state.firstItemCoordinate.imgH}
        >
          <Layer>
            <Image className="productImg" image={this.state.image} />
            {this.state.coordinate.map((item, id) => (
              <Group key={id}>
                <Rect
                  x={item.x1}
                  y={item.y1}
                  width={item.w}
                  height={item.h}
                  shadowBlur={5}
                  strokeWidth={1}
                  stroke={"red"}
                  onClick={() => {
                    this.getSearchItem(id);
                  }}
                />
                <Label x={item.x1 + item.w - 40} y={item.y1 + item.h}>
                  <Tag
                    fill="black"
                    pointerDirection="down"
                    pointerWidth={10}
                    pointerHeight={10}
                    lineJoin="round"
                    shadowColor="black"
                  />
                  <Text
                    text={item.name}
                    fontFamily="Calibri"
                    fontSize={18}
                    padding={5}
                    fill="white"
                  />
                </Label>
              </Group>
            ))}
          </Layer>
        </Stage>
      </div>
    );
  }

package.json

    {
  "name": "xtreme-react-admin",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://wrappixel.com/demos/free-admin-templates/xtreme-reactadmin-lite/",
  "dependencies": {
    "bootstrap": "4.1.3",
    "chart.js": "2.7.2",
    "history": "4.7.2",
    "node-sass": "4.6.1",
    "node-sass-chokidar": "1.3.3",
    "npm-run-all": "4.1.3",
    "react": "16.4.2",
    "react-awesome-slider": "^1.0.1",
    "react-chartjs-2": "^2.7.4",
    "react-dom": "16.4.2",
    "react-perfect-scrollbar": "1.2.0",
    "react-router-dom": "4.2.2",
    "react-scripts": "1.1.5",
    "reactstrap": "6.4.0"
  },
  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000",
  "devDependencies": {
    "eslint-plugin-react-hooks": "^2.0.1",
    "react-alice-carousel": "^1.15.3"
  }
}