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

您需要做的是，您需要检查genres数组中是否存在选定的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>

我希望这对您有用

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

1 个答案: