Question

在我的React / Redux应用程序中，我进行后端API调用以在日历中创建条目。这是在我的处理函数中启动的，它调用了动作创建者。

完成此初始步骤后，我会检查用户刚刚创建的条目是否与我的日历组件显示的当前日期相同。如果是这样，我会调用后端API来获取日历事件。我这样做是为了刷新日历。

当我逐步完成整个过程时，一切似乎都运行良好但我的日历没有显示更新的数据。

这是一个奇怪的部分：当我逐步完成这个过程时，一切正常，日历更新很好。换句话说，如果我以某种方式减慢了这个过程，那么一切似乎都运转良好。

如果我不放慢流程，日历将无法更新。没有错误。正如我所说，当我逐步完成整个过程时，我看到API返回正确的数据，调用动作创建者SET_CALENDAR_EVENTS，然后调用reducer，reducer设置数据。

就像我说的那样，没有问题，除非我在不减慢过程的情况下让它发生，日历不会更新。

知道造成这种情况的原因是什么？有什么建议吗？

我的处理程序功能代码如下所示：

clickHandleCreateEvent(event) {

   // Call API
   this.props.actions.createEvent(event);

   // Get active date
   const activeDate = this.props.activeDate;

   if(activeDate === event.eventDate) {

      this.props.actions.getCalendarEvents(activeDate);
   }

}

更新：这是我的getCalendarEvents函数：

export const getCalendarEntries = (calendarId, date) => {

    // Create get calendar entries object
    var request = {
        id: calendarId,
        date: date
    };

    // Get calendar entries
    return (dispatch) => fetch('/api/calendars/entries', fetchOptionsPost(request))
        .then((response) => {
            if (response.ok) {
                // Got events
                parseJSON(response)
                    .then(entries => {
                        dispatch(setEvents(entries))
                    })
                    .then(() => dispatch(setCalendarIsLoading(false)))
            } else {
                // Couldn't get data
                dispatch(setBadRequest(true))
            }
        })
}

Answer 1

由于createEvent和getCalendarEvents都是涉及网络通信的异步功能，因此无法保证哪个请求首先到达服务器。因此，当createEvent请求仍然通过网络传输时，您可能会读取旧数据。

为了避免这种情况，您需要同步两个请求，即在服务器对getCalendarEvents请求做出响应后调用createEvent。

clickHandleCreateEvent(event) {

   // Call API
   return this.props.actions
     .createEvent(event);
     .then(() => {
       // Get active date
       const activeDate = this.props.activeDate;

       if(activeDate === event.eventDate) {
         return this.props.actions.getCalendarEvents(activeDate)
       }
     })
}

react / redux中的奇怪行为

1 个答案: