(this) 在 react js 回调中被识别答案

【问题标题】：(this) is recognised on react js callback(this) 在 react js 回调中被识别
【发布时间】：2017-05-17 11:18:16
【问题描述】：

    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>
    );
  }
      }

嗨，我是新手，我已经在构造函数中声明了历史记录，我试图在回调时在 web 服务中设置历史记录状态，调试时这是未定义的。这是在<History Histories={this.state.histories} /> 中定义的，但它在回调中是未定义的，请问有人可以帮我吗？我已经搜索过，有人推荐使用 ref，但是 ref 怎么能与这种状态连接呢？如果有人举个例子，我将不胜感激。

【问题讨论】：

标签： javascript reactjs react-redux babeljs

【解决方案1】：

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

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

}

【讨论】：

【解决方案2】：

您尝试在 onFormSubmit 函数中设置“历史记录”。要访问组件的“this”，您需要将其绑定到函数，即

onFormSubmit {
.... 
}.bind(this)

或在构造函数中

this.onFormSubmit = this.onFormSubmit.bind(this)

【讨论】：