当 this.setState 在 .then 中使用时会出现问题吗？答案

【问题标题】：Will there be an issue when this.setState is used inside of .then?当 this.setState 在 .then 中使用时会出现问题吗？
【发布时间】：2019-09-09 06:36:55
【问题描述】：

当我在做一个项目时，在某些情况下我必须在用户更新数据时更改状态。

代码如下：

     state = {
        changedReservationStatus: toJS(this.props.reservationViewModel.getReservation())
    }

    reloadPageData = async () => {

        const { reservationViewModel, reservationOrderViewModel } = this.props

        const reservation = toJS(reservationViewModel.getReservation())

        await reservationViewModel.fetchReservation(reservation.id).then(changedReservationStatus => this.setState({ changedReservationStatus }))

    }

(reservation变量包含一个数组的数据。)

当用户点击保存按钮时，reloadPageData函数工作，然后await reservationViewModel.fetchReservation开始工作，它在this.setState之后触发.then 声明。

但您可能知道 reservationViewModel.fetchReservation 和 this.setState 都是异步工作的。

当我在 render function 中 console.log this.state.changedReservationStatus 时，它会渲染我想要获取的数据。

但是可以在 Promise 中使用 this.setState 吗？

会有什么问题吗？

【问题讨论】：

但是可以在 Promise 中使用 this.setState 吗？，可以。它非常好。 会有什么问题吗？ 取决于你以后做什么。如果需要在状态更新后执行某些操作，请在 setState 中放置回调：this.setState( newState, postUpdateCallback)
谢谢，我要使用多个异步时感到焦虑
另外，您使用了 await reservationViewModel，还添加了 .then。在这种情况下，您可以删除异步等待，因为您正在启动 .then() 这是一个承诺
是的，在promise.then() 中使用setState 完全没问题。您可能已经看到，在 componentDidMount() 内部，我们执行副作用，然后在解决 API 调用后设置状态。

标签： javascript reactjs asynchronous

【解决方案1】：

尝试以下解决方案。

state = {
        changedReservationStatus: toJS(this.props.reservationViewModel.getReservation())
    }

    reloadPageData = async () => {

        const { reservationViewModel, reservationOrderViewModel } = this.props

        const reservation = toJS(reservationViewModel.getReservation())

        await changedReservationStatus = reservationViewModel.fetchReservation(reservation.id);
        this.setState({ changedReservationStatus });
    }

【讨论】：

为什么？ OP已经拥有的解决方案有什么问题？你改变了什么？这只是一个找不同的游戏。它甚至不尝试回答问题（这是一个简单的是/否问题）。