javascript - 如何设置其他函数内的值的状态

Question

我正在尝试创建一个使用 Clarifai API 检测图片年龄的 React 应用程序。我能够 Console.Log 检测到的年龄，但我想在我的网页上显示年龄。帮助我设置 AgeDect 状态，以便我可以在我的网页上使用它

             //Value Displayed On Console
              //39

​</p>

            //App.js Code That Console.Logs Age
              class App extends Component {
            constructor(){
             super();
             this.state = {
             input : '',
             imgURL : '',
             AgeDetect : ''
             }
            }

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

            onClickEvent = () => {
              this.setState({imgURL : this.state.input})

              app.models.predict(Clarifai.DEMOGRAPHICS_MODEL ,
                                 this.state.input).then(
                      function(response) {
                           const A =response.outputs[0].data.regions[0].
                                  data.face.age_appearance.concepts[0].name
             //This Line of Code Displays Age on Console 
                                  console.log(A);
                                  this.setState({AgeDetect : A});
                             },
          //Having Problem SettingState ,this.state.AgeDetect isnt
                                                //doing anything
         render(){
                return (<AgeDetection AgeDetect={this.state.AgeDetect}/>
                      )
                   }
             //AgeDetection.js file      
      import React from 'react' ; 
      const AgeDetection = ({AgeDetect}) => {
      return(       
             <div>
              {AgeDetect}
             </div>
           );
         }
         export default AgeDetection;

Answer 1

对由值返回的数组进行排序，并将第一个对象或整个数组设置为您的状态，然后您可以非常轻松地在应用程序中使用它。在 predict then 块中使用箭头函数绑定到类。

class App extends Component {
  constructor() {
    super();
    this.state = {
      input: '',
      imgURL: '',
      AgeDetect: ''
    };
  }
  onInputChange = event => {
    this.setState({ input: event.target.value });
  };

  onClickEvent = () => {
    this.setState({ imgURL: this.state.input });
    app.models.predict(Clarifai.DEMOGRAPHICS_MODEL, this.state.input).then(
      response => {
        const A =
          response.outputs[0].data.regions[0].data.face.age_appearance
            .concepts[0].name;

        this.setState({ AgeDetect: A });
      },
      function(err) {
        // there was an error
      }
    );
  };

  render() {
    console.log(this.state);
    return (
      <div className='App'>
        <Navigation />
        <Logo />
        <ImageLinkForm
          onInputChange={this.onInputChange}
          onClickEvent={this.onClickEvent}
        />
        <FaceRecognition imgURL={this.state.imgURL} />
        <AgeDetection AgeDetect={this.state.AgeDetect} />
      </div>
    );
  }
}

export default App;