意外的令牌，预期的“;”在反应中

Question

将 Sublime 上的项目编码移动到 VSCode 并添加一些函数后，我的代码抛出了这个语法错误。谁能给我建议如何解决它？

import React, {Component} from 'react';
import Particles from 'react-particles-js';
import Clarifai from 'clarifai';
import render from 'react-dom';
import Navigation from './components/Navigation/Navigation';
import Logo from './components/Logo/Logo';
import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm';
import FaceRecognition from './components/FaceRecognition/FaceRecognition';
import Rank from './components/Rank/Rank';
import './App.css';


const app = new Clarifai.App({
 apiKey: ''
});


class App extends Component {
  constructor() {
    super();
    this.state = {
      input: '',
      imageUrl: '',
      box: {

      }
    }
  }

calculaFace = (data) => {
 const clarifaiFace = data.outputs[0].data.region[0].region_info.bounding_box;
 const image = document.getElementById('inputimage');
 const width = Number(image.width);
 const height = Number(image.height);
 return {
   leftCol: clarifaiFace.left_col * width,
   topRow: clarifaiFace.top_row * height,
   rightCol: width - (clarifaiFace.right_col * width),
   bottomRow: height - (clarifaiFace.bottom_row * height)
  }
 }
}

  displayFaceBox = (box) => {
  console.log(box);
  this.setState({box: box});
  }




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

  onSubmit = () => {
    this.setState({imageUrl: this.state.input})
    app.models.predict(Clarifai.FACE_DETECT_MODEL,this.state.input)
    .then(response => this.displayFaceBox(this.calculaFace(response)))
    .catch(err => console.log(err));
    
  }


function render() {
    return (
      <div className="App">
      <Particles className='particles'
        params={{ 
          particles: { 
            number: { 
              value: 100, 
              density: { 
                enable: true, 
                value_area: 1000, 
              } 
            }, 
          }, 
        }} 
      /> 
        <Navigation/>
        <Logo/>
        <Rank/>
        <ImageLinkForm 
          onInputChange ={onInputChange}
          onSubmit = {onSubmit}/>
        <FaceRecognition box={box}imageUrl={imageUrl}/>
      </div>
      );
      }}
  
export default App;

这是一个错误:

Failed to compile.

./src/App.js
SyntaxError: /Users/ngocnguyen/final-project/src/App.js: Unexpected token, expected ";" (64:9)

  62 | 
  63 | 
> 64 | render() {
     |          ^
  65 |     return (
  66 |       <div className="App">
  67 |       <Particles className='particles'

我试过了：

在 ES6 外部定义一个函数 class 并为内部的其他调用未定义 this 函数，如下所示：

function render() {
    return (
      <div className="App">
      <Particles className='particles'
        params={{ 
          particles: { 
            number: { 
              value: 100, 
              density: { 
                enable: true, 
                value_area: 1000, 
              } 
            }, 
          }, 
        }} 
      /> 
        <Navigation/>
        <Logo/>
        <Rank/>
        <ImageLinkForm 
          onInputChange ={onInputChange}
          onSubmit = {onSubmit}/>
        <FaceRecognition box={box}imageUrl={imageUrl}/>
      </div>
      );
      }}

...但没有任何变化

Answer 1

您的代码有几个问题。

calculaFace 方法末尾不必要的大括号。
render 方法之前不必要的 function 关键字。

这是固定代码。

import React, { Component } from "react"
import Particles from "react-particles-js"
import Clarifai from "clarifai"
import render from "react-dom"
import Navigation from "./components/Navigation/Navigation"
import Logo from "./components/Logo/Logo"
import ImageLinkForm from "./components/ImageLinkForm/ImageLinkForm"
import FaceRecognition from "./components/FaceRecognition/FaceRecognition"
import Rank from "./components/Rank/Rank"
import "./App.css"

const app = new Clarifai.App({
  apiKey: "CLARIFAI_API_KEY",
})

class App extends Component {
  constructor() {
    super()
    this.state = {
      input: "",
      imageUrl: "",
      box: {},
    }
  }

  calculaFace = (data) => {
    const clarifaiFace = data.outputs[0].data.region[0].region_info.bounding_box
    const image = document.getElementById("inputimage")
    const width = Number(image.width)
    const height = Number(image.height)
    return {
      leftCol: clarifaiFace.left_col * width,
      topRow: clarifaiFace.top_row * height,
      rightCol: width - clarifaiFace.right_col * width,
      bottomRow: height - clarifaiFace.bottom_row * height,
    }
  }

  displayFaceBox = (box) => {
    console.log(box)
    this.setState({ box: box })
  }

  onInputChange = (event) => {
    this.setState({ input: event.target.value })
  }

  onSubmit = () => {
    this.setState({ imageUrl: this.state.input })
    app.models
      .predict(Clarifai.FACE_DETECT_MODEL, this.state.input)
      .then((response) => this.displayFaceBox(this.calculaFace(response)))
      .catch((err) => console.log(err))
  }

  render() {
    return (
      <div className="App">
        <Particles
          className="particles"
          params={{
            particles: {
              number: {
                value: 100,
                density: {
                  enable: true,
                  value_area: 1000,
                },
              },
            },
          }}
        />
        <Navigation />
        <Logo />
        <Rank />
        <ImageLinkForm onInputChange={onInputChange} onSubmit={onSubmit} />
        <FaceRecognition box={box} imageUrl={imageUrl} />
      </div>
    )
  }
}

export default App

意外的令牌，预期的“;”在反应中

Unexpected token, expected ";" in reactjs

syntax-error

reactjs