使用 map 和条件渲染进行多次 axios 调用

Question

我正在尝试根据登录用户的列表呈现最喜欢的电影列表。 流程如下

1. 我在 firebase DTB 中为每个用户提供了喜爱电影的 ID
2. 用户访问“收藏”页面并更新收藏电影的集合
3. 然后为每个电影调用movieDB的API调用来渲染电影列表

不幸的是，我只能通过推送来更新 object 的数组，它为每个项目迭代了“内容”变量，这意味着即使第一次迭代也存在“内容”变量，因此留下了呈现“趋势”div的选项因为价值就是真理而不是呈现完整的内容

我怎么能

• 重构 useEffect
• 更改“趋势”的渲染条件以确保“内容”变量中的所有值都通过 API 完成更新？

const Favorite = () => {
  const { user } = useAuthContext();
  const { documents: movies } = useCollection("favMovies", ["uid", "==", user.uid]); // only fetch movies for loged user

  const [page, setPage] = useState(1);
  const [content, setContent] = useState([]);
  const [numOfPages, setNumOfPages] = useState();

  useEffect(() => {
    const items = [];

    movies &&
      movies.forEach(async (movie) => {
        try {
          const response = await axios.get(
            `https://api.themoviedb.org/3/${movie.mediaType}/${movie.id}?api_key=${process.env.REACT_APP_API_KEY}&language=en-US`
          );
          items.push(response.data);
          setContent(items);
        } catch (error) {
          console.error(error);
        }
      });
  }, [movies]);

  return (
    <div>
      <span className="pageTitle">Trending</span>

      <div className="trending">
        {content &&
          content.map((con) => (
            <SingleContent
              key={con.id}
              id={con.id}
              poster={con.poster_path}
              title={con.title || con.name}
              date={con.first_air_date || con.release_date}
              mediaType={con.media_type}
              voteAverage={con.vote_average}
            />
          ))}
      </div>

      <CustomPagination setPage={setPage} />
    </div>
  );
};

export default Favorite;

Answer 1

您可以使用Promise.all()来解决您的问题。 将您的useEffect代码更改为：

useEffect(() => {
  const fectchMovies = async () => {
    if (!movies) return;
    try {
      const promises = movies.map((movie) =>
        axios.get(
          `https://api.themoviedb.org/3/${movie.mediaType}/${movie.id}?api_key=${process.env.REACT_APP_API_KEY}&language=en-US`
        )
      );
      const content = await Promise.all(promises);
      setContent(content);
    } catch (error) {
      console.error(error);
    }
  };
  fectchMovies();
}, [movies]);