在 useEffect 方法中使用时，在解析 PromiseAll 之前返回空数组

Question

我正在遍历一个多维数组，然后将我的数据推送到一个新数组。当我使用 'then' 链记录我的数组时，它记录为空。不确定我是否以正确的方式解决这个问题。

Array.js

export const Cars = [
    {
      type: "A",
      cars: [
        { name: "buick", id: "1259263" },
        { name: "ford", id: "1299830" },
        { name: "audi", id: "0181545" },
        { name: "gmc", id: "0016024" },
      ],
    },
    {
      type: "B",
      cars: [
        { name: "mazada", id: "1306193" },
        { name: "chevy", id: "1374540" },
        { name: "nissan", id: "1419526" },
        { name: "toyota", id: "1333007" },
      ],
    },
    {
      type: "C",
      cars: [
        { name: "bmw", id: "1259297" },
        { name: "porsche", id: "1305493" },
        { name: "tesla", id: "1042547" },
        { name: "mercedes", id: "1012982" },
      ],
    },
  ];

CarComponent.js

...
export const CarComponent = () => {
  const myArr = [];
  useEffect(() => {
    const fetchList = () => {
      Promise.all(
        Cars.map((car) => {
          return car.cars.map((id) => {
            return new Promise((resolve) => {
              fetch(`/api/=${id.id}`).then((response) => {
                return new Promise(() => {
                  response.json().then((id) => {
                    console.log(id); //<----returns normal
                    myArr.push(id);
                    resolve();
                  });
                });
              });
            });
          });
        }),
      ).then(() => {
        console.log("myArr", myArr); //<-----array is empty?
      })
    };
    fetchList();
  }, []);

...

Answer 1

看看

  Promise.all(
    Cars.map((car) => {
      return car.cars.map((id) => {

从映射器函数返回的项不是 Promise，而是数组 - return car.cars.map 需要更改为 Promise。

您还应该避免显式 Promise 构造反模式。

const fetchList = () => {
    Promise.all(
        Cars.map(({ cars }) => Promise.all(
            cars.map(({ id }) =>
                fetch(`/api/=${id}`)
                    .then(res => res.json())
                    .then((result) => myArr.push(result))
            )
        ))
    ).then(() => {
        console.log("myArr", myArr);
    })
};

另一个选项，而不是推送到外部数组：

const fetchList = () => {
    Promise.all(
        Cars.map(({ cars }) => Promise.all(
            cars.map(({ id }) =>
                fetch(`/api/=${id}`)
                    .then(res => res.json())
            )
        ))
    ).then((results) => {
        console.log("myArr", results.flat());
    })
    .catch(handleErrors); // don't forget this part
};

在 useEffect 方法中使用时，在解析 PromiseAll 之前返回空数组

Empty Array is being returned before PromiseAll is resolved when used in useEffect method

fetch

promise

reactjs

use-effect