Question

我正在使用来自我的api的数据做一个基本的React应用程序。但是当我在AJAX成功之后this.setState({})时，状态不会更新。 {。{1}}方法中的state.events为空。

我做错了什么？

render

Answer 1

您使用的方式应抛出错误，请检查64。您需要double上下文在console中使用的回调方法中使用bind关键字，请使用此项：

this

或使用.then绑定上下文，如下所示：

componentDidMount() {
    axios.get('http://localhost:4000/api/v1/events')
        .then( response => {
            console.log('data', response.data);
            this.setState({events: response.data});
        })
        .catch(function (error) {
            console.warn(error);
        });
}

Answer 2

您需要将axios成功函数绑定到正确的上下文以使用setState。用这个

componentDidMount() {
        axios.get('http://localhost:4000/api/v1/events')
            .then(function (response) {
                this.setState({events: response.data});
            },bind(this))
            .catch(function (error) {
                console.warn(error);
            });
    }

Answer 3

this

内部回调没有引用您的组件上下文，因为您需要将axios的回调函数与您的react组件绑定以更新该组件的状态

import React, {PropTypes, Component} from 'react';
import axios from 'axios';
import './App.css';


class App extends Component {

constructor(props) {
    super(props);
    this.state = {
        events: []
    };
}

componentDidMount() {
    axios.get('http://localhost:4000/api/v1/events')
        .then(function (response) {
            this.setState({events: response.data});
        }.bind(this)) // binding of callback to component
        .catch(function (error) {
            console.warn(error);
        });
}

render() {    
    // this.state.events keeps being an empty array []
    return (
        <div className="home">
          {
            this.state.events.map((month) => {
              console.log(month) 
            })
          }
        </div>
    );
}

}

成功的AJAX请求后状态未更新

3 个答案: