Javascript 如何在React中启动另一个API调用之前等待一个API调用完成？

所以，在我的React应用程序中，我使用FetchAPI获取线程项列表，并调用另一个函数获取类别列表。我的线程列表立即呈现到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>
          ))}

---

如何确保在threads.map呈现之前填充类别？

您应该使用async/await：

将async关键字放在getCategories函数前面

在函数体中使用wait

您可以找到有关用法的更多信息

您可以在您的案例中使用async/await。