Question

我有一个箭头函数，该函数从cDM中调用，以使用setTimeout()每20秒检索一次日程表的更新状态。 setTimeout()方法永远不会像预期的那样向服务器触发另一个请求。所以我认为代码永远都不会到达。我不确定确切如何修改它，以便达到该方法。

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

  getUpdatedStatus = () => {
    //fetch updated status,
    //list of arrays that are updated to state in `cDM`
    const schedules = this.state.schedules;
    Promise.all(
      schedules
        .map(schedule =>
          axios({
            method: "get",
            url: schedule.selfUri,
            headers: {
              Accept: " someValue"
            }
          })
        )
        .then(response => {
          if (response.data.data[0].status !== "Complete") {
            this.timeout = setTimeout(() => this.getUpdatedStatus(), 20000);
          }
          console.log(response);
          this.setState(
            {
              scheduleStatus: response.data.data[0].status,
            },
            () => {
              console.log(this.state.scheduleStatus);
            }
          );
        })
    ).catch(error => console.log(error.response));
  };

Codesandbox

Answer 1

简而言之，您使用了错误的Promise.all()，这是因为结构类似于：

Promise.all([p1, p2,...,pn]).then([r1, r2, ..., rn])

但是您的代码类似于： Promise.all([p1, p2,...,pn].then(r))

因此，基本上，您的promise.all应该更改为以下内容：

  getUpdatedStatus = () => {
    //fetch updated status,
    //list of arrays that are updated to state in `cDM`
    const schedules = this.state.schedules;
    Promise.all(
      schedules
        .map(schedule =>
          axios({
            method: "get",
            url: schedule.selfUri,
            headers: {
              Accept: " someValue"
            }
          })
        ))
        .then(responses => {
          //now you have to iterate over the responses
          const isIncomplete = responses.some(r => r.data.data[0].status !== "Complete")
          if (isIncomplete) {
            this.timeout = setTimeout(() => this.getUpdatedStatus(), 20000);
          }
          console.log(responses);
          this.setState(
            {
              scheduleStatus: isIncomplete?'Pending':'Complete',//improve this piece of code
            },
            () => {
              console.log(this.state.scheduleStatus);
            }
          );
        })
  };

在这里您有一个working sandbox以及在沙盒上提供的代码。

Answer 2

好吧，基本上@PrinceHernandez找到了主要问题，但是您的代码还有很多其他问题：

输入字段为只读
缺少tbody
在每个key上缺少tr属性

我竭尽所能进行抛光，在这里：https://codesandbox.io/s/6vyk48x18n

打开控制台，您将看到代码每打印2秒更新一次1。然后将可移动的内容移至每个时间表，以使每个getUpdatedStatus都有一个控制超时的调用的标志。

React-在Promise.all

2 个答案: