javascript - react 中查询为空时显示的项目

Question

我正在学习 React，并且我使用 freecodecamp 上的示例制作了一个示例电视节目应用程序。从我所看到的来看，一切都工作正常，但是在搜索某些内容然后在搜索框中退格所有内容后，它显示了不应该显示的结果，任何人都可以看到我在代码中犯的错误吗？

class SeriesList extends React.Component {
  state = {
    series: [],
    query: ''
  }

  onChange = async e => {
    this.setState({query: e.target.value});
    const response = await fetch(
      `https://api.tvmaze.com/search/shows?q=${this.state.query}`
    );
    const data = await response.json();
    this.setState({series: data});
  }

  render(){
    return (
      <div>
        <input type="text" onChange={this.onChange} value={this.state.query} />
        <ul>
          <SeriesListItem list={this.state.series} />
        </ul>
      </div>
    );
  }
}

我在 codepen 上有它。

https://codepen.io/crash1989/pen/ERxPGO

谢谢

Answer 1

还有一点你可以使用await来设置State

onChange = async e => {    
    await this.setState({query: e.target.value});
    const response = await fetch(
      `https://api.tvmaze.com/search/shows?q=${this.state.query}`
    );
    const data = await response.json();
    this.setState({series: data});
  }

您的请求将在更改查询后执行