我有一个箭头函数,该函数从cDM调用以使用setTimeout()每20秒检索一次日程表的更新状态.

componentDidMount() {
    //get request to /schedules
    //update state with response data
    this.getUpdatedStatus();
}

/ schedules中存在的每个时间表如下所示：

"data": {
"id": "2147483605",
"selfUri": "/schedules/2147483605",
"type": "Schedule",
"status": "Pending",
}

因此,在下面的方法中,每个schedule.selfUri被请求,而我试图更新每个日程表的状态.

    getUpdatedStatus = () => {
//fetch updated status,
const schedules = this.state.schedules;
Promise.all(
  schedules.map(schedule =>
    axios({
      method: "get",
      url: schedule.selfUri,
    })
  )
)
  .then(response => {
    console.log(response);
    const isIncomplete = response.some(r => r.status !== "Complete");
    console.log(isIncomplete);
    if (isIncomplete) {
      this.timeout = setTimeout(() => this.getUpdatedStatus(), 20000);
    }
    this.setState(
      {
        scheduleStatus: isIncomplete ? "Pending" : "Complete",
      },
      () => {
        console.log(this.state.scheduleStatus);
        console.log(this.state.schedules);
      }
    );
  })
  .catch(error => console.log(error.response));

};

setTimeout函数正在运行,并且每20秒请求一次以获取状态的可能更新.对象响应最终返回状态为complete,但该值未在我的表中重新呈现.我相信我的诺言链存在问题,使用setTimeout不会在完成时更新this.state.scheduleStatus.我附上了一个codeandbox,可以更好地了解我的问题.

Codesandbox

解决方法:

我认为您的问题与Promise链或使用setTimeout()没有任何关系.我认为这是由于不正确地获取isIncomplete标志的值所致,因此始终将其设置为true.

您通过以下行设置此值：

const isIncomplete = response.some(r => r.status !== "Complete")

我认为这里的问题是您期望响应对象是您指定的数据,其中包含带有字符串值的status属性,而实际上这是Axios返回的响应对象,其中statusproperty是状态实际响应的代码(成功时为200).因此,isIncomplete始终为true,因为r.status从不等于“ Complete”.

您的数据可以在data属性中找到,因此上述行应如下所示：

const isIncomplete = response.some(r => r.data.status !== "Complete")