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

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 = () => {&nbsp; &nbsp; this.setState({imageUrl: this.state.input});&nbsp; &nbsp; app.models&nbsp; &nbsp; .predict(&nbsp; &nbsp; &nbsp; Clarifai.FACE_DETECT_MODEL,&nbsp;&nbsp; &nbsp; &nbsp; this.state.input)&nbsp; &nbsp; .then(response => this.calculateFaceLocation(response))&nbsp; &nbsp; .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({&nbsp; &nbsp; apiKey: "fec62103a7704ea8b8ae7f951dc0b823",});const particlesOptions = {&nbsp; &nbsp; particles: {&nbsp; &nbsp; &nbsp; &nbsp; number: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: 70,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; density: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enable: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value_area: 800,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; },};class App extends Component {&nbsp; &nbsp; constructor() {&nbsp; &nbsp; &nbsp; &nbsp; super();&nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input: "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imageUrl: "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box: {},&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; &nbsp; calculateFaceLocation = (data) => {&nbsp; &nbsp; &nbsp; &nbsp; const clarifaiFace =&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data.output[0].data.regions[0].region_info.bounding_box;&nbsp; &nbsp; &nbsp; &nbsp; const image = document.getElementById("inputimage");&nbsp; &nbsp; &nbsp; &nbsp; const width = Number(image.width);&nbsp; &nbsp; &nbsp; &nbsp; const height = Number(image.height);&nbsp; &nbsp; &nbsp; &nbsp; console.log(width, height);&nbsp; &nbsp; };&nbsp; &nbsp; onInputChange = (event) => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ input: event.target.value });&nbsp; &nbsp; };&nbsp; &nbsp; onButtonSubmit = () => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ imageUrl: this.state.input });&nbsp; &nbsp; &nbsp; &nbsp; app.models&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .predict(Clarifai.FACE_DETECT_MODEL, this.state.input)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((response) => this.calculateFaceLocation(response))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch((err) => console.log(err));&nbsp; &nbsp; };&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Particles className="particles" params={particlesOptions} />,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Navigation />,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Logo />,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Rank />,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ImageLinkForm&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onInputChange={this.onInputChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onButtonSubmit={this.onButtonSubmit}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <FaceRecognition imageUrl={this.state.imageUrl} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }}export default App;