Как вывести данные с идентификаторами, соответствующими выбранному идентификатору данных? - PullRequest
Новая
       8

Как вывести данные с идентификаторами, соответствующими выбранному идентификатору данных?

0 голосов
/ 31 января 2019

Я хочу вывести список на основе того, что пользователь выбрал в раскрывающемся меню.Каждый жанр в меню имеет уникальный идентификатор, как и все отдельные фильмы.Проблема, с которой я сталкиваюсь, заключается в соединении этих двух функций или создании функции, которая будет выводить нужные результаты.

Пока что происходит, когда вы выбираете жанр, он выводит только номер идентификатора выбранного жанра.Я также сделал отдельный список, который выводит случайные фильмы и их информацию, но эти два не связаны.Вы можете вызывать отдельные движения, используя 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>

Поэтому в основном я хочу создать функцию, которая будет выводить только фильмы с совпадающим идентификатором в выбранный идентификатор жанра.Я пробовал разные способы сделать это, но мне кажется, что я слишком усложняю все (я очень плохо знаком с этим, поэтому, пожалуйста, прости меня за то, что я не использую правильные термины и, возможно, задаю глупый вопрос)*

1 Ответ

0 голосов
/ 31 января 2019

Что вам нужно сделать, так это то, что вам нужно проверить в массиве жанров, если выбранный идентификатор присутствует или нет, и если да, чем установить selectedGenre в качестве объекта идентификатора и имени. 

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>

Надеюсь, это сработает для вас

...