反应状态过滤器错误。你好。我正在 React 中进行 API 实现。我通过 API 获取电影信息并将该信息分配给状态。该应用程序还有一个项目搜索模块。并根据用户写入的信息显示状态中的项目。我正在使用以下过滤器执行此模块,但不幸的是我收到错误消息。 这是我的代码:
class App extends React.Component {
state = {
movies: [],
searchQueryState: ""
}
async componentDidMount(){
const response = await axios.get(`https://api.themoviedb.org/3/list/${7101545}?api_key=${process.env.REACT_APP_API_KEY}&language=en-US`);
const data = response.data.items;
console.log(data)
this.setState({movies: data})
}
deleteMovie = async (movie) => {
axios.post(`
https://api.themoviedb.org/3/list/7101545/remove_item?media_id=${movie.id}&session_id=${process.env.REACT_APP_SESSION_ID}&api_key=${process.env.REACT_APP_API_KEY}
`);
const newMovieList = this.state.movies.filter(
m => m.id !== movie.id
)
this.setState(state => (
{
movies: newMovieList
}
))
}
searchQuery = (event) => {
this.setState({
searchQueryState: event.target.value
})
}
render() {
let filteredMovies = this.state.movies.filter(
movie => {
console.log(movie)
return movie.original_title.toLowerCase().indexOf(this.state.searchQueryState.toLowerCase()) !== -1
}
)
return (
<div className="container">
<div className="row">
<div className="col-12">
<SearchBar
searchMovieProp={this.searchQuery}
/>
</div>
</div>
<div className="container">
<MovieList
movies={filteredMovies}
deleteMovieProps={this.deleteMovie}
/>
</div>
</div>
)
}
}
这是我遇到错误的部分:
let filteredMovies = this.state.movies.filter(
movie => {
console.log(movie)
return movie.original_title.toLowerCase().indexOf(this.state.searchQueryState.toLowerCase()) !== -1
}
)
*这是我的错误:*TypeError:无法读取未定义(匿名函数)的属性“toLowerCase” C:/Users/melak/Desktop/arin-react/my-movies-1/src/components/ App.js:65 62 | constfilteredMovies = this.state.movies.filter( 63 | 电影 => { 64 | console.log(movie)