(this)在react js回调中被识别 [英] (this) is recognised on react js callback

问题描述

    class App extends Component {
      constructor(props){
        super(props);

         this.state = {
           histories: [
                {
                 "name": "Test1",
                 "date":"25/05/2017",
                 "question": "Are you happy, today?",
                 "answer":"Yes"
                }, 
                {
                 "name": "Test2",
                 "date":"25/05/2017",
                 "question": "Are you happy, today?",
                 "answer": "Yes"
                }
              ] }; 

               $.ajax({
          url: "http://localhost:xxxx/api/Surveys",
          success: (data) => {
              this.setState({surveys: data});
            },
            error: function(xhr,status,err){
              console.log('error');
            }
        });
        }

         onFormSubmit(id) {
        console.log("Started");
        fetch("http://localhost:xxxx/api/Surveys/" + id + "/submit", {
            method:'POST'
        })
        .then(function(response){
          if(response.ok) {
            console.log('success');
            //this is not defined here
             this.setState({
               histories: [
                {
                 "name": "Test3",
                 "date":"25/05/2017",
                 "question": "Are you happy, today?",
                 "answer":"Yes"
                }, 
                {
                 "name": "Test4",
                 "date":"25/05/2017",
                 "question": "Are you happy, today?",
                 "answer": "Yes"
                }
              ]
          })
          }
          else {
            console.log('error');
          }
        })
        .catch(function(error){
          console.log('catch error');
        });
      }
 render(){
    return ( 
      <div>
          <History 
           Histories={this.state.histories} />
      </div>
    );
  }
      }

我是新来的反应者，我已经在构造函数中声明了历史记录，我试图在回调时在webservice中设置历史记录状态，这在我调试时是未定义的. 这是在<History Histories={this.state.histories} />中定义的，但是在回调中是未定义的，有人可以帮我吗?我已经搜索过，有人建议使用ref，但是请问ref如何连接到这种状态?如果有人举个例子，我将不胜感激.

Hi,I am new to react, I have declared histories in the constructor, I tried to set histories state in webservice when call back, this is undefined when I debug it. this is defined in <History Histories={this.state.histories} />, but it is undefined inside callback, would anyone give me hand on it, please? I have searched, some people recommend using ref, but how could ref connect with this state, please? I would appreciate if anyone give an example on it.

推荐答案

您应该将箭头函数作为onFormSubmit方法内AJAX调用的成功回调函数传递，以确保该回调函数内的this指向组件:

You should pass arrow function as success callback for AJAX call inside onFormSubmit method to make sure that this inside this callback points to the component:

onFormSubmit(id) {
        console.log("Started");
        fetch("http://localhost:xxxx/api/Surveys/" + id + "/submit", {
            method:'POST'
        })
        .then((response) => {
             ...
        })

}

这篇关于(this)在react js回调中被识别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！