Question

我正在从一个名为“ clarifai”的网站上使用机器学习面部检测API，尽管在我的react App.js文件夹中存在问题，并且错误显示“ TypeError：this.setstate不是函数”。我将链接附加到我的React localhost的图像。React localhost screenshot

实际上，我是React的初学者，我试图构建一个基本的react网站，并嵌入机器学习API以在用户尝试输入图像链接时检测人脸。任何帮助将不胜感激！

data: () => ({
    peopleSelected:[],
    people: [
        { header: 'Group 1' },
        { name: 'Sandra Adams', group: 'Group 1' },
        { name: 'Ali Connors', group: 'Group 1' },
        { name: 'Trevor Hansen', group: 'Group 1' },
        { name: 'Tucker Smith', group: 'Group 1'},
        { divider: true },
        { header: 'Group 2' },
        { name: 'Britta Holt', group: 'Group 2'},
        { name: 'Jane Smith ', group: 'Group 2'},
        { name: 'John Smith', group: 'Group 2' },
        { name: 'Sandra Williams', group: 'Group 2' }
      ]
  })

import React, { Component } from 'react';
import Navigation from './Components/Navigation/Navigation';
import FaceRecognition from './Components/FaceRecognition/FaceRecognition';
import Clarifai from 'clarifai';
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 './App.css';

const app = new Clarifai.App({
 apiKey: 'API_KEY'
});

const particlesOptions = {
  particles: {
    number: {
      value:100,
      density: {
        enable: true,
        value_area:800
      }

    }
  }
}

class App extends Component {
  constructor() {
    super();
    this.state = {
      input:'',
      imageUrl:'',
      box: {},
    }
  }
 
 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 => this.displayFaceBox(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 box={this.state.box} imageUrl={this.state.imageUrl}/>

      </div>
    );
  }
}

export default App;

Answer 1

调用setState函数，不要更改其定义

  displayFaceBox = (box)  => {
    console.log(box);
    // you can also use object short hand, instead of {box: box}
    this.setState({box});
  }

Answer 2

在代码中进行以下更改，看看它是否有效。

更改

this.setState = ({box: box})

收件人

this.setState({box})

React将setstate作为函数

2 个答案: