时间戳

首页 > 解决方案 > 如何输出 id 与所选数据 ID 匹配的数据？

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

问题描述

我想根据用户在下拉菜单中选择的内容输出一个列表。菜单中的每个类型都有一个唯一的 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。我一直在尝试各种方法来做到这一点，但我觉得我把一切都复杂化了。（我对此非常陌生，所以请原谅我没有使用正确的术语，可能会问一个愚蠢的问题。）

标签： javascriptapidrop-down-menuframeworksoutput

解决方案

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

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>

我希望这对你有用

推荐阅读