为什么我在渲染部分得到这个解析错误？

Question

请帮我解决这个问题，我不明白出了什么问题。我得到了这段代码，但出现以下错误：语法错误：意外的标记，应为“;” 它指向渲染后的第一个花括号。这是代码import Clarifai from 'clarifai'import Navigation from './components/Navigation/navigation';import FaceRecognition from './components/FaceRecognition/facerecognition';import Logo from './components/Logo/logo';import ImageLinkForm from './components/ImageLinkForm/imagelinkform';import Rank from './components/Rank/rank';import './App.css';import  'tachyons'import Particles from 'react-particles-js';const app = new Clarifai.App({ apiKey: 'fec62103a7704ea8b8ae7f951dc0b823'});const particlesOptions = {    particles: {        number: {          value: 70,          density: {            enable: true,            value_area: 800          }        }    }};class App extends Component {  constructor() {    super();    this.state = {      input: '',      imageUrl: '',      box:{}    }  }};  calculateFaceLocation = (data) => {      const clarifaiFace = data.output[0].data.regions[0].region_info.bounding_box;      const image = document.getElementById('inputimage');      const width = Number(image.width);      const height = Number(image.height);      console.log(width,height);    };  onInputChange = (event) => {    this.setState({input: event.target.value});  };  onButtonSubmit = () => {    this.setState({imageUrl: this.state.input});    app.models    .predict(      Clarifai.FACE_DETECT_MODEL,       this.state.input)    .then(response => this.calculateFaceLocation(response))    .catch (err => console.log(err));        render() {    return (      <div className="App">        <Particles className='particles'          params={particlesOptions}        />,        <Navigation />,        <Logo />,        <Rank />,        <ImageLinkForm         onInputChange={this.onInputChange}         onButtonSubmit={this.onButtonSubmit}        />,        <FaceRecognition imageUrl={this.state.imageUrl} />      </div>    );  }export default App;老实说，我不知道出了什么问题。我已经检查了几次，但我想错误只是在躲避我。谢谢你们的时间。

Answer 1

onButtonSubmit缺少}：

onButtonSubmit = () => {

    this.setState({imageUrl: this.state.input});

    app.models

    .predict(

      Clarifai.FACE_DETECT_MODEL, 

      this.state.input)

    .then(response => this.calculateFaceLocation(response))

    .catch (err => console.log(err));

}; // here it is (should be :))

Answer 2

我已经清理、格式化并修复了您的代码中缺失的“}”。

import Clarifai from "clarifai";

import Navigation from "./components/Navigation/navigation";

import FaceRecognition from "./components/FaceRecognition/facerecognition";

import Logo from "./components/Logo/logo";

import ImageLinkForm from "./components/ImageLinkForm/imagelinkform";

import Rank from "./components/Rank/rank";

import "./App.css";

import "tachyons";

import Particles from "react-particles-js";

const app = new Clarifai.App({

    apiKey: "fec62103a7704ea8b8ae7f951dc0b823",

});

const particlesOptions = {

    particles: {

        number: {

            value: 70,

            density: {

                enable: true,

                value_area: 800,

            },

        },

    },

};

class App extends Component {

    constructor() {

        super();

        this.state = {

            input: "",

            imageUrl: "",

            box: {},

        };

    }

    calculateFaceLocation = (data) => {

        const clarifaiFace =

            data.output[0].data.regions[0].region_info.bounding_box;

        const image = document.getElementById("inputimage");

        const width = Number(image.width);

        const height = Number(image.height);

        console.log(width, height);

    };

    onInputChange = (event) => {

        this.setState({ input: event.target.value });

    };

    onButtonSubmit = () => {

        this.setState({ imageUrl: this.state.input });

        app.models

            .predict(Clarifai.FACE_DETECT_MODEL, this.state.input)

            .then((response) => this.calculateFaceLocation(response))

            .catch((err) => console.log(err));

    };

    render() {

        return (

            <div className="App">

                <Particles className="particles" params={particlesOptions} />,

                <Navigation />,

                <Logo />,

                <Rank />,

                <ImageLinkForm

                    onInputChange={this.onInputChange}

                    onButtonSubmit={this.onButtonSubmit}

                />

                ,

                <FaceRecognition imageUrl={this.state.imageUrl} />

            </div>

        );

    }

}

export default App;