如何在useEffect React內部的.map中等待axios調用

Question

在我的useEffect鈎子內部，我試圖調用.map內部的 api 請求，但函數的其余部分不等待響應。 我已經嘗試使.map async ，但是函數的其余部分返回Promises這樣做的正確方法是什么，以便可以調用我的 api 請求，然后繼續執行其余代碼？

const getData = async (id) => {
    const myData = await api.get(
      '/api/request/id'
    );
    return myData;
  };

useEffect(() => {
  const myData = sampleData.map((item)
    getData(item.id).then((response) => {
      console.log(response.data.data);
      return response.data.data
    })
  
  const myThings = myItem.things.map((thing) => {
    if (thing.type === 'sampleType1') {
      return [thing.name, thing.value];
    } else (thing.type === 'sampleType2') {
      return [
        thing.name,
        thing.content.name,
      ];
    }
  });
  setData = {myThings, myData}
}, []);

Answer 1

在映射它們之前，您將希望等待所有這些承諾解決，所以這是Promise.all的一個很好的用例：

useEffect(() => {
  async function fetchData() {
    const myData = await Promise.all(sampleData.map((item) =>
      getData(item.id).then((response) => {
        console.log(response.data.data);
        return response.data.data
      }));
  
    const myThings = myItem.things.map((thing) => {
      if (thing.type === 'sampleType1') {
        return [thing.name, thing.value];
      } else (thing.type === 'sampleType2') {
        return [
          thing.name,
          thing.content.name,
        ];
      }
    });
    setData = {myThings, myData}
  }
  
  fetchData();
}, []);