我正在学习 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
谢谢
最佳答案
还有一点你可以使用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});
}
您的请求将在更改查询后执行
关于javascript - react 中查询为空时显示的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50584874/