在 React Js 中使用另一個 Map function Map function

Question

我想使用 map function 將流派添加到我的電影搜索應用程序的輪播中。我有兩個 json 文件，其中一個是電影數據數組，作為具有 genre_ids 鍵的對象，例如： genre_ids: 0: 16 1: 28 2: 12 3: 35 4: 10751 5: 14

和 other 包含一個對象數組，用唯一的鍵指定流派的名稱。 例如： { "genres": [ { "id": 10759, "name": "Action & Adventure" } ] }

Json 文件：

1. 電影數據： https://api.themoviedb.org/3/trending/all/day?api_key=921345714956c7d9c3db36ac3f20ee09
2. 類型： https://api.themoviedb.org/3/genre/movie/list?api_key=921345714956c7d9c3db36ac3f20ee09&language=en-US

我先嘗試用電影數據映射 json。 然后在映射流派時，我檢查流派的 id 是否與電影數據元素的 id 匹配。 然后我返回了該特定類型的名稱。 但它正在返回流派 json 中存在的所有流派的名稱。

我的代碼：

{
  trend.map((e, i) => {
    return (
      <div className="carousel-item" key={i}>
        <img
          src={`${img}${e.backdrop_path}`}
          className="d-block carimage" alt="..." />
        <div className="carousel-caption d-none d-md-block">
          <div className='caro-discription'>
          <button className='trailer-main-button'>More Info!!</button>
          <h1>{e.title?e.title:e.name}</h1>
          <h3>Rating: {e.vote_average}/10</h3>
          </div>
          <div className='genre-list'> 
          {genre.map((a,b)=>{
            return(
            <h3 className='genre-list-item' key={b}>{a.id=e.genre_ids? a.name: null}</h3>
            )
          })}
          </div> 
        </div>
      </div>


    )
  })
}

Answer 1

改變

<h3 className='genre-list-item' key={b}>{a.id=e.genre_ids? a.name: null}</h3>

到

<h3 className='genre-list-item' key={b}>{a.id===e.genre_ids? a.name: null}</h3>

Answer 2

你在這里做錯了幾件事。 首先是使用map而不是find 。 您的Movie object 有一個genre_ids屬性，該屬性始終為正值 integer。這意味着您不需要 map 所有與genre_ids匹配的流派，而您只需要找到您的電影被標記為的特定genre ：

<h3 key={e.genre_ids * e.id}>{genres.find((g, idx) => g.id === e.genre_ids).name}</h3>

這樣您就可以節省處理時間。 此外，您的代碼存在使用=進行比較的問題。 單個等號用於賦值。 如果你想檢查兩個值之間的相等性，你會使用== 。 如果你想檢查兩者是否也屬於同一type ，你可以使用=== 。