为什么第二个函数不等到第一个（异步）函数完成后才触发？（反应）

Question

我需要做什么才能等到doSomethingWithItems()完成后fetchItems()？

const [items, setItems] = useState();

const fetchItems = async () => {
  try {
    let responseData = await sendRequest(`${process.env.REACT_APP_BACKEND_URL}/items/user/${userId}`);
    setItems(responseData.items);
  } catch (err) {}
};

const doSomethingWithItems = () => {
  const filteredItems = items.filter(x => x.title === 'something');
  setItems(filteredItems);
}

useEffect(() => {
  fetchItems(); // ** WAIT FOR THIS TO FINISH BEFORE MOVING ON **
  doSomethingWithItems();
}, []);

Answer 1

由于fetchItems是async，因此它返回 a Promise。您可以遵循.then()：

useEffect(() => {
  fetchItems().then(doSomethingWithItems);
}, []);

或者，更扩展的语法以更好地理解结构：

useEffect(() => {
  fetchItems().then(() => {
    doSomethingWithItems();
  });
}, []);

然而，您的下一个问题是跟踪状态。请注意，这doSomethingWithItems取决于items. 但状态不会立即更新。不更新 中的状态fetchItems，而是返回新值并将其传递给doSomethingWithItems：

const [items, setItems] = useState();

const fetchItems = async () => {
  try {
    let responseData = await sendRequest(`${process.env.REACT_APP_BACKEND_URL}/items/user/${userId}`);
    return responseData.items;
  } catch (err) {
    // You probably want to do something meaningful here
    // At least return something:
    return [];
  }
};

const doSomethingWithItems = (newItems) => {
  const filteredItems = newItems.filter(x => x.title === 'something');
  setItems(filteredItems);
}

useEffect(() => {
  fetchItems().then(newItems => {
    doSomethingWithItems(newItems);
  });
}, []);