React.js：无法获取对象数组内属性中设置的承诺结果

Question

api response

由

films

和

vehicles

url 数组等属性组成，通过

fetching those

，我正在尝试获取

resultant objects

并尝试将其更新回这些提到的属性中。

使用

Promise.all

返回承诺后，我尝试使用结果设置

films

和

vehicles

，但我无法获得所需的输出。这是我的工作代码链接

任何有关该问题的帮助将不胜感激。

在等待承诺获得结果后，在响应对象中设置

films

和

vehicles

后，我遇到以下问题：

在这种情况下，我首先得到

films

，但

not with the desired output

是

films needs to the array of objects

，而是

getting the promise status

。

接下来，我将得到

films

结果作为

pending

和

vehicles

承诺

fulfilled

结果，而不是上述对象属性中的对象结果数组。

如何解决这个问题？只有我一个

desired output is to get the films and vehicles array of objects inside the response object which I have kept in the newState

.

请在下面找到我的代码：

import { useEffect, useState } from "react";
const url = `https://swapi.dev/api/people/`;

export function ToDo() {
  const [results, setResults] = useState([]);

  useEffect(() => {
    apiCallHandler(url);
  }, []);

  async function asyncAllPromises(arr) {
    const promises = await arr.map(async (item) => {
      const response = await fetch(item, { cache: "no-cache" });
      const json = await response.json();
      return json;
    });
    const response = await Promise.all(promises);
    return response;
  }

  const apiCallHandler = async () => {
    try {
      const response = await fetch(url);
      let data = await response.json();

      let newState = data.results.map((result) => {
        result.films = asyncAllPromises(result.films).then((data) => data);
        result.vehicles = asyncAllPromises(result.vehicles).then(
          (data) => data
        );
        return result;
      });

      setResults(newState);
    } catch (error) {
      console.error("Unable to find data", error);
    }
  };

  console.log("results", results);

  const table =
    results && results.length ? (
      <table>
        <thead>
          <tr>
            <td>Name</td>
            <td>Mass</td>
          </tr>
        </thead>
        <tbody>
          {results.map((result, index) => {
            return (
              <tr key={index}>
                <td>{result.name}</td>
                <td>{result.mass}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    ) : (
      "Loading.."
    );

  return <>{table}</>;
}

Answer 1

您忘记在第 27 行和第 28 行中调用

await

，因此

result.films

保留为

Promise

。另外，

.then(data=>data)

是多余的。

因此newState的定义应改为：

let newState = await Promise.all(data.results.map(async result => {
  result.films = await asyncAllPromises(result.films).then((data) => data);
  result.vehicles = await asyncAllPromises(result.vehicles);
  return result;
}));

Promise.all()

用于将

Promise

映射器函数返回的

async

转换回一个

Promise

，然后对其进行

await

ed。

希望这有帮助！