如何使用来自ajax调用的响应数据做出反应？

Question

我刚开始学习reactjs并试图通过ajax调用来检索数据。该组件如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

class App extends React.Component {
   // myTitle='';

    constructor() {
        super();
        this.state = {val: 0};
        this.update = this.update.bind(this);
    }

    update() {
        var root = 'http://jsonplaceholder.typicode.com';
        $.ajax({
            url: root + '/posts/1',
            method: 'GET'
        }).then(function (data) {
            this.state.val = data.title;
        });

        console.log(this.state);
    }

    componentWillMount() {
        console.log('mounting')
    }

    render() {
        console.log('rendering!')
        return <button onClick={this.update}>{this.state.val}</button>
    }

    componentDidMount() {
        console.log('mounted')
    }

    componentWillUnmount() {
        console.log('bye!')
    }
}

当ajaxcall返回时，它返回一个错误，其中state.val语句为：

jQuery.Deferred exception: Cannot set property 'val' of undefined TypeError: Cannot set property 'val' of undefined
    at Object.<anonymous> (http://localhost:3000/08-lifecycle-mounting/index.js:28958:33)
    at mightThrow (http://localhost:3000/08-lifecycle-mounting/index.js:32563:30)
    at process (http://localhost:3000/08-lifecycle-mounting/index.js:32631:13) 

如何更新状态并使用来自ajax调用的返回数据？

Answer 1

以下是如何显示使用AJAX请求获取的数据的演示： http://codepen.io/PiotrBerebecki/pen/ALQxbE

首先，为了在update方法中更新您的州，请按照React的官方文档（https://facebook.github.io/react/docs/component-api.html#setstate）进行操作：

  

不要直接改变this.state，因为之后调用setState（）可能会替换你所做的突变。把this.state看作是不可变的。

代码中的这一行：

this.state.val = data.title;

应该成为：

this.setState({val: data.title})

然后，接下来要解决的问题是确保this.setState在$.ajax()调用中调用时引用您的类。您可以通过两种方式实现这一目标：

1.使用箭头功能：

$.ajax({
  url: root,
  method: 'GET'
}).then(data => {
  let randomNumber = Math.floor(Math.random() * data.length);
  this.setState({title: data[randomNumber].title});
});

2.使用bind(this)：

$.ajax({
  url: root,
  method: 'GET'
}).then(function(data) {
  let randomNumber = Math.floor(Math.random() * data.length);
  this.setState({title: data[randomNumber].title});
}.bind(this));

另请注意，在更新状态后尝试直接使用update时，在console.log(this.state)方法内部，您将看不到更新状态，原因如下所示：https://stackoverflow.com/a/39804336/4186037