使用 setState() 调用 AJAX 后状态未更新答案

【问题标题】：state not updating after AJAX call using setState()使用 setState() 调用 AJAX 后状态未更新
【发布时间】：2017-05-12 00:22:58
【问题描述】：

在 componentDidMount 中进行 AJAX 调用后，我没有更新状态。我的 api 调用返回正确的数据。

如果我在错误的生命周期组件中执行 setState，有什么想法吗？在 componentDidMount 中发出 AJAX 请求并在那里设置新状态。在构造函数中，我将状态设置为空数组

class DeliveryDateInput extends React.Component {
constructor(props) {
    super(props);
    this.getDeliveryDate = this.getDeliveryDate.bind(this);

    this.state = {
        selectDate: selectedDate || validDelDateArray[0],
        validDeliveryDateArray: validDelDateArray,
        firstDeliveryDay: [],
        lastDeliveryDay: [],
        selectedDate: [],
        deliveryDatesAllowed: [],
        offDays: [],
    };
}

componentDidMount () {
    console.log('App componentDidMount');
    this.getDeliveryDate();
}

componentWillUpdate(nextProps, nextState) {
    this.getDeliveryDate();
    console.log('Your prev offday state: ' + this.state.offday);
    console.log('Your next offday state: ' + nextState.offday);
}

getDeliveryDate() {
    const self = this;
    $.ajax({
        type: 'GET',
        url:  //deliveryDateAPI,
        contentType: 'application/json; charset=utf-8',
        success(data) {
            self.setState({
                firstDeliveryDay: data.firstDeliveryDate,
                lastDeliveryDay: data.lastDeliveryDay,
                selectedDate: data.firstDeliveryDate,
                deliveryDatesAllowed: data.deliveryDates,
                offDays: data.offDays,
            });
        },
        failure(errMsg) {
            console.log(errMsg);
        },
    });
}

【问题讨论】：

componentDidMount 里面获取数据和设置状态没有问题。获取数据后是否调用success 回调？并且没有名为failure 的$.ajax 选项。您需要将其更改为error。
你解决了这个问题了吗，如果是，请考虑投票或接受我的回答，谢谢^^！

标签： ajax reactjs setstate

【解决方案1】：

在 React 中，您必须将 ajax 回调函数绑定到组件（即.bind(this)）

你知道这一点并且在你的构造函数中做了类似的事情，但是对于 jquery ajax，它看起来有点不同：（这里不需要 self 变量）

getDeliveryDate() {
    $.ajax({
        type: 'GET',
        url:  //deliveryDateAPI,
        contentType: 'application/json; charset=utf-8',
        success: function(data) {
            this.setState({
                firstDeliveryDay: data.firstDeliveryDate,
                lastDeliveryDay: data.lastDeliveryDay,
                selectedDate: data.firstDeliveryDate,
                deliveryDatesAllowed: data.deliveryDates,
                offDays: data.offDays,
            });
        }.bind(this),
        error: function(errMsg) {
            console.log(errMsg);
        }.bind(this),
    });
}

我已经测试了上面的代码并且它可以工作。您可能不需要绑定 error 回调，因为您还没有对组件执行任何操作，但如果您想在那里进行进一步的操作，也许仍然有必要！

如果这还不起作用，请在此处评论控制台上的错误，谢谢！

添加修改：

请删除您的 componentWillUpdate 中的 ajax 调用，这将创建一个“永远”循环：

componentWillUpdate(nextProps, nextState) {
    //this.getDeliveryDate();
    console.log('Your prev offday state: ' + this.state.offday);
    console.log('Your next offday state: ' + nextState.offday);
}

原因是：实际上，在设置了一个状态之后，componentWillUpdate()就会被执行，而这里如果你再次运行ajax调用，然后它会再次setState，那么循环将永远持续下去！

【讨论】：