javascript - Promise.all 返回 [[PromiseValue]] 但我需要所有返回值的数组

Question

我正在尝试返回 json 对象数组，但下面的代码返回 [[PromiseValue]] 并且数据肯定在那里。

“函数的结果”

如何获取 json 对象数组并将其设置为状态

注意:如果我在 getEndResults 函数中调用 .then(data => console.log(data)) 是有效的，但我无法在那里设置状态它抛出一个错误

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.

getUserCredits = async (userId, creditId) => {
    return await fetch(
    `${someLink}/userId/${userId}/credit/${creditId}`,
        {
            method: "GET",
        }
    )
}

getEndResult = async () => {
    const userId = await this.getUserId(userId);
    const userData = await this.getUserData(userId);

    const checkData = await Promise.all(userData.checks.map(check => {
    return check.checkIds.map((checkIds) => {
        return this.getUserCredits(userId ,checkIds)
            .then(res => res.json())
            .then(data => console.log(data))
            // Can't setState here
            // .then(data => this.setState({ results: data }))
        })
    }))

    console.log(checkData);
}

Answer 1

您正在创建一个二维数组，然后将其传递给 Promise.all。 Promise.all 只知道如何处理一维数组，所以它看到的是一个包含不是 promises 的东西的数组。对于非 promise ，promises.all 只是立即解析为它被赋予的值。

在将二维数组发送到 Promise.all 之前，您需要展平您的二维数组。如果你有 array.prototype.flatmap 的 polyfill (很快就会被添加到 javascript 中，但目前还没有)，这可以像这样完成:

const checkData = await Promise.all(userData.checks.flatMap(check => {
  return check.checkIds.map((checkIds) => {
    return this.getUserCredits(userId, checkIds)
      .then(res => res.json());
  });

如果您无法使用该函数，那么您可以编写自己的函数来展平二维数组，如下所示:

function flatten(arr) {
  const result = [];
  arr.forEach(val => {
    if (Array.isArray(val)) {
      result.push(...val);
    } else {
      result.push(val);
    }
  });
  return result;
}

// used like:

const promises = flatten(userData.checks.map(check => {
  // ... etc
}));
const checkData = await Promise.all(promises);