时间戳

首页 > 解决方案 > 如何在 React 中将多个响应附加到 useState？

reactjs - 如何在 React 中将多个响应附加到 useState？

问题描述

希望你能帮我解决这个问题！我正在发送多个 HTTP 请求以获取电影列表。目前，我正在使用临时变量 favMovies 并将所有结果推送给它，然后在下一个 .then() 设置状态。这很好用，但我放了一个 TODO 评论，我觉得有更好的方法来填充状态而无需额外的 .then()。目前，如果我取消注释我的 TODO，我只会将 1 部电影添加到我的状态中......我显然错过了一些东西......任何人都可以帮忙吗？

import React, { useState, useEffect } from 'react';
import axios from 'axios';

interface Movie {
  Title: string;
}

function App() {
  const [favouriteMovies, setFavouriteMovies] = useState<Movie[]>([]);

  useEffect(() => {
    const url = 'http://www.omdbapi.com/?apikey=<API_KEY>&i=';
    const ids = ['t1', 't2', 't3'];
    const promises = [];
    const favMovies: Movie[] = [];
    const requests = ids.map((id) => `${url}${id}`);

    for (let i = 0; i < requests.length; i++) {
      promises.push(axios.get(requests[i]));
    }

    axios
      .all(promises)
      .then(
        axios.spread((...args) => {
          for (let i = 0; i < args.length; i++) {
            favMovies[i] = args[i].data;
            // TODO: investigate why it's not appending all movies, but the last/first one
            // setFavouriteMovies([...favouriteMovies, args[i].data]);
          }
        })
      )
      .then(() => {
        setFavouriteMovies(favMovies);
      });
  }, []);

  return (
    <div className='App'>
      {favouriteMovies.length
        ? favouriteMovies.map((m: any) => (
            <div key={Math.random()}>{m.Title}</div>
          ))
        : null}
    </div>
  );
}

export default App;

标签： reactjsaxiosuse-state

解决方案

状态更改是排队的。根据之前的状态定义更改，而不是您可以在组件范围内直接引用的状态。

setFavouriteMovies((previousMovies) => [...previousMovies, args[i].data]);

推荐阅读