无法过滤数组以在应用程序上获取电影

Question

我有一个名为handleDelete的函数，它接收一个movie对象，并根据传递的movie进行过滤。当我点击它时，我得到错误Cannot read property 'filter' of undefined。

更新：发布所有代码。

JS

handleDelete = (movie) => {
    const movies = this.setState.movies.filter(m => m._id !== movie._id);
    this.setState({ movies });
};

JSX

import React, { Component } from "react";
import "../services/fakeMovieService";
import { getMovies } from "../services/fakeMovieService";

class MovieTable extends Component {
   state = {
   movies: getMovies()
};

render() {
   return (<table className="table">
    <thead>
      <tr>
        <th scope="col">Title</th>
        <th scope="col">Genre</th>
        <th scope="col">Stock</th>
        <th scope="col">Rate</th>
        <th> </th>
      </tr>
    </thead>
    <tbody>
      {this.state.movies.map(movies => (
        <tr key={movies._id}>
          <td> {movies.title} </td>
          <td> {movies.genre.name}</td>
          <td> {movies.numberInStock} </td>
          <td> {movies.dailyRentalRate}</td>
          <td
            onClick={movie => this.handleDelete(movie)}
            className="btn btn-danger btn-sm"
          >
            Delete
          </td>
        </tr>
      ))}
    </tbody>
  </table>);
}}

 export default MovieTable;

电影阵列

const movies = [ {
    _id: "5b21ca3eeb7f6fbccd471815",
    title: "Terminator",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
    numberInStock: 6,
    dailyRentalRate: 2.5,
    publishDate: "2018-01-03T19:04:28.809Z"
}];

Answer 1

看起来你做了一个错字this.setState.movies.filter应该是this.state.movies.filter所以：

handleDelete = movie => {
    const movies = this.state.movies.filter(m => m._id !== movie._id);
    this.setState({ movies });
};

Answer 2

没有更多的上下文我假设你的问题是你如何引用handleDelete。我的主要假设是，在使用智能组件时，您没有在构造函数中将handleDelete绑定到this。

class MyComp extends React.Component {
    constructor(props) {
        super(props);    
        this.state = {
            movies: null,
        };
        this.handleDelete = this.handleDelete.bind(this);
    }
    handleDelete = movie => {
        const movies = this.setState.movies.filter(m => m._id !== movie._id);
        this.setState({ movies });
    }
    render() {
      return (<td
        onClick={movie => this.handleDelete(this.props.movie)}
        className="btn btn-danger btn-sm">
        Delete
      </td>);
    }
}