React - метод setTimeout () не запускается после Promise.all

Question

У меня есть функция стрелки, которая вызывается из cDM для получения обновленного статуса расписаний каждые 20 секунд с setTimeout().Метод 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

Ну, в основном @PrinceHernandez нашел основную проблему, но с вашим кодом было много других проблем:

• поле ввода было доступно только для чтения
• отсутствует tbody
• отсутствует key атрибут на каждом tr

Я взял на себя смелость полировать, как мог, здесь: https://codesandbox.io/s/6vyk48x18n

Откройте консоль, и выубедитесь, что код обновляется каждые 2 секунды после печати 1.Перемещение затем к каждому расписанию сделало необходимым иметь флаг, управляющий ОДИН вызовом тайм-аута на getUpdatedStatus.

Answer 2

простыми словами, вы неправильно используете Promise.all(), это потому, что структура выглядит примерно так:

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

но ваш код выглядит примерно так: Promise.all([p1, p2,...,pn].then(r))

так что в основном ваше обещание. Все должно быть изменено на что-то вроде этого:

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

здесь у вас есть рабочая песочница с кодом, который вы предоставили в вашей песочнице.