如何输出 id 与所选数据 ID 匹配的数据？

Question

我想根据用户在下拉菜单中选择的内容输出一个列表。菜单中的每个类型都有一个唯一的 ID，就像所有单独的电影一样。我遇到的问题是连接两者或创建一个函数来输出我想要的结果。

到目前为止，当您选择一个流派时，它只会输出选定的流派 ID 号。我还制作了一个单独的列表，输出随机电影及其信息，但两者没有联系。您可以使用 movie.genre_ids 调用各个动作。

componentDidMount() {
    this.getMovies();
    this.getGenres();

      fetch(BASE_URL)
      .then(response => {
        return response.json().then(json => {
          return response.ok ? json : Promise.reject(json);
        });
      })

      .then((data) => {
          var movies = [];
          console.log('Success', JSON.stringify(data));
          movies.push({"movieinfo":data})
          this.setState({movies : data.results,loading:false});
           alert("Total pages= " + data.total_pages)
        })
        .catch((error) => {
            alert(error);
        });           
  }

  handleGenreChange(e) {
    this.setState({ selectedGenre: e.target.value})

  }

render() {
    return (
     <div class="list-style">
          <select type='text' value={this.state.selectedGenre} 
                 onChange={this.handleGenreChange}>
            {this.state.genres.map((item, index)=>(
            <option key={item.id} value={item.id}>{item.name}</option>
            ))}
          </select>
          {this.state.selectedGenre} 
    </div>

所以基本上我想创建一个函数，它只将具有匹配 ID 的电影输出到所选流派 ID。我一直在尝试各种方法来做到这一点，但我觉得我把一切都复杂化了。（我对此非常陌生，所以请原谅我没有使用正确的术语，可能会问一个愚蠢的问题。）

Answer 1

你需要做的是你需要检查流派数组是否存在选定的 id，如果存在，则将 selectedGenre 设置为 id 和 name 的对象。

handleGenreChange(e) {
    this.state.genres.map((item, index)=>(
            if(item.id === e.target.value) {
               this.setState({
                 selectedGenre: item
               })
            }
     ))
  }

您还需要更改<select> 中的值，如下所述并打印电影名称，如下所示

<div class="list-style">
          <select type='text' value={this.state.selectedGenre.id} 
                 onChange={this.handleGenreChange}>
            {this.state.genres.map((item, index)=>(
            <option key={item.id} value={item.id}>{item.name}</option>
            ))}
          </select>
          {this.state.selectedGenre.name} 
    </div>

我希望这对你有用