Блог

Я поиграл с API Star Wars, и мне трудно получить данные фильма от персонажей (https://swapi.dev/api/people/1 /).

 export const SwapiFilms = (props) => {
  const [films, setFilms] = useState([]);

  const filmList = props.filmsUrl;

  useEffect(() => {
    function getData() {
      try {
        const response = Promise.all(
          filmList.map((url) => 
            fetch(url).then((res) => res.json())
          )
        );
        console.log(response);
        setFilms(response);
      } catch (error) {
        console.log(error);
      }
    }

    getData();
  }, []);

  return (
    <>
      Title: {films.title}
      <br />
      <br />
      Director: {films.director}
      <br />
      <br />
      {JSON.stringify(films)}
    </>
  );
};
  

Вы должны await Promise.all .

 useEffect(() => {
  async function getData() { // <-- declare getData an async function
    try {
      const response = await Promise.all( // <-- await promise resolution
        filmList.map((url) => 
          fetch(url).then((res) => res.json())
        )
      );
      console.log(response);
      setFilms(response);
    } catch (error) {
      console.log(error);
    }
  }

  getData();
}, []);
  

Вероятно, вам также не следует смешивать цепочки обещаний и async / await. Придерживайтесь одного или другого

Цепочка обещаний

 useEffect(() => {
  Promise.all(filmList.map(fetch))
    .then(responses => {
      if (!response.ok) {
        throw Error('Film response not ok!');
      }
      return response.json();
    })
    .then(films => {
      console.log(films);
      setFilms(films);
    })
    .catch(error => console.log(error));
}, []);
  

Асинхронный / ожидающий

 useEffect(() => {
  async function getData() {
    try {
      const responses = await Promise.all(filmList.map(fetch));
      const films = await Promise.all(responses.map(res => res.json());

      console.log(films);
      setFilms(films);
    } catch (error) {
      console.log(error);
    }
  }

  getData();
}, []);
  

Примечание: ваше состояние films представляет собой массив, поэтому вы захотите получить доступ films к нему с помощью методов массива при возврате рендеринга.