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

Question

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

Answer 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 调用，这将创建一个 "forever" 循环：

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 , 那么循环将永远持续下去！

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

state not updating after AJAX call using setState()

ajax

setstate

reactjs