Question

我试图在单击“提交”按钮时获得响应，但是会引发解析错误。我怀疑它在按钮提交功能中，但是即使多次检查语法后也看不到我犯了什么错误。

我尝试删除并添加括号，但错误似乎仍然存在。

这是我编写的代码

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

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

const particleOptions={
  particles: {
    number:{
      value:500,
      density:{
        enable:true,
        value_area:1000
      }
    }
}
}
class App extends Component{
  constructor(){
super();
this.state={
  input:'',
  imageUrl:'',
  box:{},
  route:'signin',
  isSignedIn:false,
  user:{
      id:'',
      name:'',
      email:'',
      password:'',
      entries:0,
      joined:'',
    }
}
loadUser = (data) => {
  this.setState({
    user:
    { 
        id:data.id,
        name:data.name,
        email:data.email,
        password:data.password,
        entries:data.entries,
        joined:data.joined,
    }
    })
}

calculateFaceLocation = (data) =>{
const clarifaiFace=data.outputs[0].data.regions[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});
}
  onButtonSubmit = () => {
    this.setState({imageUrl: this.state.input});
    app.models
      .predict(
        Clarifai.FACE_DETECT_MODEL,
        this.state.input)
      .then(response => {
        if (response) {
          fetch('http://localhost:3000/image', {
            method: 'put',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
              id: this.state.user.id
            })
          })
            .then(response => response.json())
            .then(count => {
              this.setState(Object.assign(this.state.user, { entries: count}))
            })

        }
        this.displayFaceBox(this.calculateFaceLocation(response))
      })
     .catch(err => console.log(err));
  } 
onRouteChange=(route) =>{
  if(route === 'signout'){
this.setState({ isSignedIn: false });
}else if(route === 'ghar') {
  this.setState({ isSignedIn: true });
}
this.setState({route:route});
}


  render(){
    const { isSignedIn , imageUrl, route, box} = this.state;
  return (
    <div className="App">
     <Particles className="particles" 
              params={
                  particleOptions
                }
              />
      <Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange}/>
     {route ==='ghar' 
      ?
      <div>
      <Logo/>
      <Rank name={this.state.user.name}
      entries={this.state.user.entries}/> 
      <FaceRecognition 
      box={this.state.box}
      imageUrl={this.state.imageUrl}/>
      <ImageLinkForm 
      onInputChange={this.onInputChange}
      onButtonSubmit={this.onButtonSubmit}
      />
      </div>
      :(
        route ==='signin'
          ?  <SignIn loadUser={this.loadUser} onRouteChange={this.onRouteChange} /> 
          : <Register loadUser={this.loadUser} onRouteChange={this.onRouteChange}/>
        )
      }
    </div>
  );
}
}
export default App;

以下是错误。

./src/App.js
  Line 117:  Parsing error: Unexpected token, expected ";"

  115 |  
  116 |  
> 117 |   render(){
      |           ^
  118 |     const { isSignedIn , imageUrl, route, box} = this.state;
  119 |   return (
  120 |     <div className="App">

Answer 1

您的Constructor（）未关闭，请在this.state之后关闭它

如果我在代码中解析错误，如何确定错误在哪里

1 个答案: