javascript - 如何在反应中使用 for 循环，以便我可以循环两个数组并在两个数组中返回第二个数组中的对象（如果两者都匹配）

Question

我在对象数组中的每个对象中都有一个 id 数组，我想使用 for 循环来匹配第二个对象 id 数组中的这些 id 并从第二个数组返回该对象名称，但我无法使用for 循环和 if 语句。我想在 HTML 中呈现这些名称。

这是我的流派数组的样子：

 "genres": [
    {
      "id": 28,
      "name": "Action"
    },
    {
      "id": 12,
      "name": "Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    },
    {
      "id": 35,
      "name": "Comedy"
    },
    {
      "id": 80,
      "name": "Crime"
    },
    {
      "id": 99,
      "name": "Documentary"
    },
    {
      "id": 18,
      "name": "Drama"
    },
    {
      "id": 10751,
      "name": "Family"
    },
    {
      "id": 14,
      "name": "Fantasy"
    },
    {
      "id": 36,
      "name": "History"
    },
    {
      "id": 27,
      "name": "Horror"
    },
    {
      "id": 10402,
      "name": "Music"
    },
    {
      "id": 9648,
      "name": "Mystery"
    },
    {
      "id": 10749,
      "name": "Romance"
    },
    {
      "id": 878,
      "name": "Science Fiction"
    },
    {
      "id": 10770,
      "name": "TV Movie"
    },
    {
      "id": 53,
      "name": "Thriller"
    },
    {
      "id": 10752,
      "name": "War"
    },
    {
      "id": 37,
      "name": "Western"
    }
  ]

这就是我的热门电影对象的样子。我想通过genre_ids循环到流派，如果将任何流派ID与genre_ids的ID匹配，我想保存流派名称的名称：

popularMovies=[{
 "popularity": 507.672,
      "vote_count": 224,
      "video": false,
      "poster_path": "/zfE0R94v1E8cuKAerbskfD3VfUt.jpg",
      "id": 474350,
      "adult": false,
      "backdrop_path": "/4W0FnjSGn4x0mKZlBRx8OjFxQUM.jpg",
      "original_language": "en",
      "original_title": "It Chapter Two",
      "genre_ids": [
        35,
        27
      ],
      "title": "It Chapter Two",
      "vote_average": 7.2,
      "release_date": "2019-09-06"}]

  these arrays are in state


import React, { Component } from 'react'
import store from '../../store'


export class genre extends Component {
    constructor(props){
        super(props)
        this.state={
            genre:[],
            popularMovies:[],
        }


        store.subscribe(() => {
            // When state will be updated(in our case, when items will be fetched), 
            // we will update local component state and force component to rerender 
            // with new data.

           this.setState({
                popularMovies: store.getState().popularMovies.movies,
                genre:store.getState().genresIds.genreIds
            },()=>{
                if (!this.state.genre ) {
                    return;
                }
  this.state.popularMovies.map((movie)=>(
                movie.genre_ids.map((id)=>(

                    this.genre.map((genre)=>(
                     console.log(id,genre)
                     //how do i match genre_ids id with genre id 
                    ))
                ))
            ))
    }
                     console.log(this.state.genre);
            });




          });

    }


    render() {
        return (
            <div>

            </div>
        )
    }
}

export default genre

标签： javascriptreactjsredux

Answer 1

您可以简单地取消使用forEach loopand usingincludes()方法，
这是代码片段

var genres = [
    {
      "id": 28,
      "name": "Action"
    },
    {
      "id": 12,
      "name": "Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    },
    {
      "id": 35,
      "name": "Comedy"
    },
    {
      "id": 80,
      "name": "Crime"
    },
    {
      "id": 99,
      "name": "Documentary"
    },
    {
      "id": 18,
      "name": "Drama"
    },
    {
      "id": 10751,
      "name": "Family"
    },
    {
      "id": 14,
      "name": "Fantasy"
    },
    {
      "id": 36,
      "name": "History"
    },
    {
      "id": 27,
      "name": "Horror"
    },
    {
      "id": 10402,
      "name": "Music"
    },
    {
      "id": 9648,
      "name": "Mystery"
    },
    {
      "id": 10749,
      "name": "Romance"
    },
    {
      "id": 878,
      "name": "Science Fiction"
    },
    {
      "id": 10770,
      "name": "TV Movie"
    },
    {
      "id": 53,
      "name": "Thriller"
    },
    {
      "id": 10752,
      "name": "War"
    },
    {
      "id": 37,
      "name": "Western"
    }
  ];

popularMovies=[{
 "popularity": 507.672,
      "vote_count": 224,
      "video": false,
      "poster_path": "/zfE0R94v1E8cuKAerbskfD3VfUt.jpg",
      "id": 474350,
      "adult": false,
      "backdrop_path": "/4W0FnjSGn4x0mKZlBRx8OjFxQUM.jpg",
      "original_language": "en",
      "original_title": "It Chapter Two",
      "genre_ids": [
        35,
        27
      ],
      "title": "It Chapter Two",
      "vote_average": 7.2,
      "release_date": "2019-09-06"}]



var arr = []
genres.forEach(function(singleObject){
    popularMovies.forEach(function(objectToMatch){
        if(objectToMatch.genre_ids.includes(singleObject.id)){
            arr.push(singleObject.name);
        }
    })
})
console.log(arr);

在arr你将有名称关闭流派。
这会帮助你。