React.js 状态过滤错误。 (无法读取 undefined 的属性“toLowerCase”)

时间:2021-07-15 19:47:11

标签: javascript reactjs api array-filter

反应状态过滤器错误。你好。我正在 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.movi​​es.filter( 63 | 电影 => { 64 | console.log(movie)

0 个答案:

没有答案