通过两个数组映射

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 (
            <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>
          );
        })}

所以页面会显示电影的名字，电影海报的图片，演员的名单，以及两家电影院放映电影的价格比较。我在这些变量中存储来自两个不同apis的数据。

Answer 1

我会使用备注钩来创建您想要的数据结构

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>
  ));
}