如何在 JS React 项目中集成 Clarifai Api？

Question

我正在使用 Clarifai API 从 Udemy 课程（从零到精通）进行人脸检测项目。不幸的是，我收到一个我不明白的错误。这是代码：

App.js：

import "./App.css";
import React, { Component } from "react";
import Navigation from "./Components/Navigation/Navigation";
import Logo from "./Components/Logo/Logo";
import ImageLinkForm from "./Components/ImageLinkForm/ImageLinkForm";
import Rank from "./Components/Rank/Rank";
import ParticlesBg from "particles-bg";
import Clarifai from "clarifai";
import FaceRecognition from "./Components/FaceRecognition/FaceRecognition";

process.nextTick = setImmediate;

const app = new Clarifai.App({
  apiKey: "7a2f4c6565204e56bc4e6c1fc52e2dd8",
});

const particlesOptions = {
  particles: {
    number: {
      value: 3,
      density: {
        enable: true,
        value_area: 800,
      },
    },
  },
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      input: "",
    };
  }
  onInputChange = (event) => {
    console.log(event.target.value);
  };

  onButtonSubmit = () => {
    console.log("click!");
    app.models
      .predict(
        "6dc7e46bc9124c5c8824be4822abe105",
        "https://samples.clarifai.com/face-det.jpg"
      )
      .then((response) =>
        this.displayFaceBox(this.calculateFaceLocation(response))
      )
      .catch((err) => console.log(err));
  };

  render() {
    return (
      <div className="App">
        <ParticlesBg
          className="particles"
          params={particlesOptions}
          bg={true}
        />
        <Navigation />
        <Logo />
        <Rank />
        <ImageLinkForm
          onInputChange={this.onInputChange}
          onButtonSubmit={this.onButtonSubmit}
        />
        <FaceRecognition />
      </div>
    );
  }
}
export default App;

和 ImageLink 表格：

import React from "react";

const ImageLinkForm = ({ onInputChange, onButtonSubmit }) => {
  return (
    <div>
      <p className="f3">{"This magic brain will detect faces"}</p>
      <div className="center">
        <div className="form center pa4 br3 shadow-5">
          <input
            className="f4 pa2 w-70 center"
            type="text"
            onChange={onInputChange}
          ></input>
          <button
            className="w-30 grow f4 link ph3 pv2 dib white bg-light-purple"
            onClick={onButtonSubmit}
          >
            Detect
          </button>
        </div>
      </div>
    </div>
  );
};

export default ImageLinkForm;

这里是错误： 感谢您的帮助！

我尝试将 react-scrpits 更改为版本 4.0.2 并安装 axios npm（ -> 我在尝试使用 clarifai api 时遇到此错误，我该如何修复它？）。 我还尝试更改 Clarifai 模块的版本（notning 更改）。 可能是 XML 请求有问题，我还不是很了解。 我在通过课程中完成的其他方式为 JS 集成 RestAPI 时遇到问题。 感谢您的帮助！