通过两个数组 React 映射

Question

我想在我的应用程序上显示来自两个映射数组的信息。

{filmWorld.Provider &&
        filmWorld.Movies.map((movie, index) => {
          return (
            <div className="movies" key={index}>
              <h3>{movie.Title}</h3>
              <img src={movie.Poster} alt={movie.Title} />
              <h5>{movie.Actors} </h5>
              <h6> Price: ${movie.Price}</h6>
              <hr />
            </div>
          );
        })}

这目前工作正常，但我想在同一个 h6 中理想地显示另一家电影院的另一个价格。其他信息都一样。

另一张地图会非常相似：

{cinemaWorld.Provider &&
        cinemaWorld.Movies.map((movie, index) => {
          return (
            <div className="movies" key={index}>
              
          <h6> Price: ${movie.Price}</h6>
          
        </div>
      );
    })}

但同样，我只需要将这家电影院的价格显示在同一个 h6 标签上。或者采用不同的方法（例如合并变量）会更直观吗？

理想的最终结果代码 return 是这样的：

 return (
            <div className="movies" key={index}>
              <h3>{movie.Title}</h3>
              <img src={movie.Poster} alt={movie.Title} />
              <h5>{movie.Actors} </h5>
              <h6> FilmWorld Price: ${movie.Price}
                   CinemaWorld Price: ${movie.Price}</h6>
              <hr />
            </div>
          );
        })}

因此该页面将显示电影名称、电影海报图片、演员列表以及放映该电影的两家电影院的价格比较。我在这些变量中存储来自两个不同 API 的数据。

Answer 1

我会使用 memo hook 来创建你想要的数据结构

const movies = useMemo(() => {
  if (!filmWorld.Provider) return [];
  return filmWorld.Movies.map((movie, index) => ({
    ...movie,
    cinemaWorldPrice: cinemaWorld.Provider && cinemaWorld.Movies[index]?.Price,
  }));
}, [filmWorld, cinemaWorld]);

这会从 cinemaWorld.Movies 中获取相应的索引（条件是 cinemaWorld.Provider）。

现在您可以迭代 movies 数组

{
  movies.map((movie, index) => (
    <div className="movies" key={index}>
      <h3>{movie.Title}</h3>
      <img src={movie.Poster} alt={movie.Title} />
      <h5>{movie.Actors} </h5>
      <h6>
        Price: ${movie.Price}
        CinemaWorld Price: ${movie.cinemaWorldPrice}
      </h6>
      <hr />
    </div>
  ));
}

通过两个数组 React 映射

map through two arrays React

javascript

higher-order-functions

reactjs

react-native