在React Js中在另一个Map函数内部使用Map函数:

huangapple go评论78阅读模式
英文:

Using Map function inside of another Map function in React Js

问题

我想要使用map函数将流行电影搜索应用的轮播中添加电影类型。我有两个JSON文件,其中一个是包含电影数据的对象数组,其中有一个键作为genre_ids,例如:
genre_ids: 0: 16 1: 28 2: 12 3: 35 4: 10751 5: 14

另一个包含对象数组,指定了具有唯一键的类型名称。例如:
{ "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>
    )
  })
}
英文:

I want to add genre to my Movie Search app's carousel using map function. I have two json files one of them is an array of movie data as objects having a key as genre_ids eg:
genre_ids:
0: 16
1: 28
2: 12
3: 35
4: 10751
5: 14

and other contains an array of objects specifying the name of the genre with a unique key. eg:
{
&quot;genres&quot;: [
{
&quot;id&quot;: 10759,
&quot;name&quot;: &quot;Action &amp; Adventure&quot;
}
]
}

The Json files:

  1. Movie data: https://api.themoviedb.org/3/trending/all/day?api_key=921345714956c7d9c3db36ac3f20ee09
  2. Genre: https://api.themoviedb.org/3/genre/movie/list?api_key=921345714956c7d9c3db36ac3f20ee09&amp;language=en-US

I tried mapping the json with movie data first. Then while mapping the genre i checked if the id of the genre matches with that of the id of the movie data element. Then I returned the name of that particular genre. But it is returning the names of all the genre present in the genre json.

My code:

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


    )
  })
}

答案1

得分: 1

将以下内容进行翻译:

&lt;h3 className=&#39;genre-list-item&#39; key={b}&gt;{a.id=e.genre_ids? a.name: null}&lt;/h3&gt;

改为

&lt;h3 className=&#39;genre-list-item&#39; key={b}&gt;{a.id===e.genre_ids? a.name: null}&lt;/h3&gt;
英文:

Change

&lt;h3 className=&#39;genre-list-item&#39; key={b}&gt;{a.id=e.genre_ids? a.name: null}&lt;/h3&gt;

to

&lt;h3 className=&#39;genre-list-item&#39; key={b}&gt;{a.id===e.genre_ids? a.name: null}&lt;/h3&gt;

答案2

得分: 0

这里有几个你做错的地方。首先是使用map而不是find。你的Movie对象有一个genre_ids属性,它总是一个正整数。这意味着你不需要映射所有与genre_ids匹配的流派,而只需要找到电影所标记的特定genre

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

如果你有多个流派,那么你会使用map

{genres.map((g, idx) => e.genre_ids.includes(g.id) ? <h3 key={e.id * g.id}>{g.name}</h3> : null )}

这样可以节省处理时间。

另外,你的代码存在使用=进行比较的问题。单个等号用于赋值。如果你想要检查两个值之间的相等性,你应该使用==。如果你还想检查两者是否具有相同的type,那么你应该使用===

英文:

There are a couple of things you're doing wrong here. First is the use of map instead of find. Your Movie object has one genre_ids property which is always a positive integer. This means what you don't need to map all genres which match the genre_ids, instead you just need to find the specific genre your movie is tagged as:

&lt;h3 key={e.genre_ids * e.id}&gt;{genres.find((g, idx) =&gt; g.id === e.genre_ids).name}&lt;/h3&gt;

If you do have multiple genres, then you'd use map:

{genres.map((g, idx) =&gt; e.genre_ids.includes(g.id) ? &lt;h3 key={e.id * g.id}&gt;{g.name}&lt;/h3&gt; : null )}

This way you save processing time.
Also, your code has the issue of using = for comparison. A single equals sign is used for assignment. If you want to check equality between two values, you'd use ==. If you want to check if the two are of the same type as well, you'd use ===.

huangapple
  • 本文由 发表于 2023年1月9日 19:49:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/75056853.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定