如何在REACT中使用选择表单来更改请求api？

Question

首先，如果这个问题看起来有点新手，请原谅我。

我正在使用电影数据库的api开发电影目录，我能够创建房屋和搜索系统，但是现在我正在实现一种根据电影的发行顺序，受欢迎程度等过滤电影的方法。 。

但是，当我选择过滤器时，我无法更新电影列表，您能帮我吗？

首先，api对这些过滤器进行查询，如以下URL所示：

https://api.themoviedb.org/3/discover/movie?api_key=${key}**&sort_by=**{filter}.asc

我开发的代码：

Filter.js

import React, { Component } from 'react';

export default class Filter extends Component {
  constructor(props) {
    super(props);
    this.state.filter = { filter: 'release_date' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ filter: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    const {filter} = this.state; 
    if (onFilter) {
      onFilter(filter)
    }
  }

  render() {
    return (
      <div className="row">
        <form onChange={this.handleSubmit}>
          <label>
            Ordenar por:
            <select value={this.state.value} onChange={this.handleChange}>
              <option value="release_date">Ordem de lançamento</option>
              <option value="original_title">Ordem alfabética</option>
              <option value="popularity">Popularidade</option>
              <option value="vote_average">Avaliação</option>
            </select>
          </label>
        </form>
      </div>
    );
  }
}

Home.js

import React, { Component } from 'react';
import Api from '../../Services/Api';
import Navbar from '../Navbar/Navbar';
import Filter from '../Filter/Filter';
import Card from './Cards';

export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      movies: []
    }
  }

  componentDidMount() {
    let q = this.props.match.params.q;
    q = q ? q.replace(' ', '+') : '';
    this.listMovies(q)
  }

  async listMovies(searchTerm = '') {
    try {
      const { results: movies } = searchTerm !== '' ? await Api.searchMovie(searchTerm) :
        await Api.getMovies()
      this.setState({
        ...this.state,
        movies
      })
    }
    catch (e) { }
  }

  onSearch(searchTerm, filter) {
    this.listMovies(searchTerm)
  }


  render() {
    return (
      <>
        <Navbar onSearch={searchTerm => this.onSearch(searchTerm)} />
        <Filter onFilter={filter => this.onFilter(filter)}/>
        <div className="container">
          <div className="row">
            {this.state.movies.map(movie => (
              <Card movie={movie} />
            ))}
          </div>
        </div>
      </>
    )
  }
}

Api.js

const BASE_URL = 'https://api.themoviedb.org/3'
const API_KEY = 'KEY'

 async function request(url) {
  const response = await fetch(`${BASE_URL}${url}`);
  return await response.json();
}

export default {
  getMovies: (filter) => {
    return request(`/discover/movie?api_key=${API_KEY}&language=en-US&?sort_by=${filter}.desc`)
  },

  getMovie: (id) => {
    return request(`/movie/${id}?api_key=${API_KEY}&language=pt-BR`)
  },

  searchMovie: (searchTerm, filter) => {
    return request(`/search/movie?api_key=${API_KEY}&language=pt-BR&query=${searchTerm}?sort_by=${filter}.desc`) 
  }
}

如果您能帮助我，我将非常感谢。 <3

Answer 1

第一个，onFilter（filter）应该是this.props.onFilter（filter），因为它是从Home组件传递过来的。

选择值= {this.state.value} onChange = {this.handleChange}

我认为值是this.state.filter而不是this.state.value

form onChange = {this.handleSubmit}

我在调用表单onChange的表单中看不到任何提交按钮，所以我认为在更改过滤器时未调用此函数。