我想從兩個映射陣列中顯示有關我的應用程式的資訊。
{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>
);
})}
因此該頁面將顯示電影名稱、電影海報圖片、演員串列以及放映該電影的兩家電影院的價格比較。我將來自兩個不同 api 的資料存盤在這些變數中。
uj5u.com熱心網友回復：
我會使用備忘錄掛鉤來創建您想要的資料結構
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這從（條件為 on 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>
));
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/466361.html
標籤：javascript 反应 反应式 高阶函数