React.js:无法在对象数组内的属性中获取promise结果集

这个 api response 由诸如 films 和 vehicles url数组和 fetching those ,我正在努力 resultant objects 并试图将其更新回上述属性中。

使用返回承诺后 Promise.all ,我正在尝试设置 电影 和 车辆 结果,但我无法获得所需的输出。这是我的 Working Code Link

如有任何关于这个问题的帮助,我们将不胜感激。

设置后我收到以下问题 电影 和 车辆 在响应对象中等待promise后得到结果:

在这种情况下,我得到 电影 第一个但是 not with the desired output 其中 films needs to the array of objects ,但是 getting the promise status 。

接下来,我将获得 电影 结果为 pending 和 车辆 许诺 fulfilled result,而不是上述对象属性中的对象的结果数组。

如何重新解决这个问题?我的唯一 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}</>;
}