Как ждать, пока один вызов API завершит sh, прежде чем инициировать другой в React? - PullRequest
Новая
       34

Как ждать, пока один вызов API завершит sh, прежде чем инициировать другой в React?

0 голосов
/ 29 апреля 2020

Так что в моем приложении React я использую API выборки, чтобы получить список «потоковых» элементов, и еще один вызов для получения списка «категорий». Мой список "потоков" отображается сразу в DOM, и в одном элементе DOM это зависит от существования списка "категорий". Он работает большую часть времени, но время от времени «поток» выбирается до того, как «категории» заполняются, а элемент DOM, пытающийся получить доступ к «категориям», выдает ошибку, говоря, что я пытаюсь получить доступ к свойству неопределенного элемента. В основном мне нужно найти способ ожидания «выборки» категорий и их заполнения перед тем, как извлекать «нити». 

useEffect(() => {
  getCategories();
  getThreads();
}, []);

function getThreads() {
loadThreads(categoryId, Feed.threadPage++, 10)
  .then((r) => {
    if (r.status === 200) {
      r.text().then((responseBody) => {
        let responseBodyObject = JSON.parse(responseBody);
        if (responseBodyObject.threads.length === 0)
          setHasMoreThreads(false);
        setThreads(threads.concat(responseBodyObject.threads));
      });
    } else {
      toast.error("Failed to fetch threads");
    }
  })
  .catch((e) => toast.error("Failed to fetch threads."));
}

function getCategories() {
loadCategories()
  .then((r) => {
    if (r.status === 200) {
      r.text().then((responseBody) => {
        let responseBodyObject = JSON.parse(responseBody);
        setCategories(responseBodyObject.categories);
      });
    } else {
      toast.error("Failed to load the categories");
    }
  })
  .catch((e) => toast.error("Failed to load the categories"));
}

И в моем DOM у меня есть: 

{threads.map((v, i) => (
            <div key={i}>
              <div
                className={classes.feedThreadBox}
                onClick={(e) => console.log(v)}
              >
                <h5 style={{ marginBottom: 0 }}>
                  {v != undefined && v.title}
                </h5>
                <i
                  className="fa fa-circle fa-xs"
                  style={{
                    color:
                      "#" +
                      categories.find(
                        (category) => category.id === v.categoryId
                      ).color,
                    fontSize: 10,
                  }}
                ></i>{" "}
                {
                  categories.find(
                    (category) => category.id === v.categoryId
                  ).name
                }
              </div>
              <hr></hr>
            </div>
          ))}

Как мне go убедиться, что «категории» заполнены перед тем, как «threads.map» отобразится?

1 Ответ

1 голос
/ 29 апреля 2020

Вы должны использовать async / await:

  • поставить ключевое слово asyn c перед вашей функцией getCategories ()

  • use ждите в теле функции

Более подробную информацию об использовании можно найти здесь

...