Javascript 无法筛选阵列以在react应用程序上获取电影

我有一个名为

handleDelete

的函数，它接收

movie

对象，并根据传递的

movie

进行过滤。单击它时，出现错误

无法读取未定义的属性“filter”

更新：发布所有代码

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;

---

如果没有更多的背景，我假设你的问题是你是如何成为一个引用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>);
    }
}

类MyComp扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
电影：空，
};
this.handleDelete=this.handleDelete.bind（this）；
}
handleDelete=电影=>{
const movies=this.setState.movies.filter（m=>m.\u id！==movie.\u id）；
this.setState（{movies}）；
}
render（）{
return（this.handleelete（this.props.movie）}
className=“btn btn危险btn sm”>
删去
);
}
}

如果没有更多的上下文，我假设您的问题是如何处理引用数据。我的主要假设是，在使用智能组件时，您没有将构造函数中的

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>);
    }
}

类MyComp扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
电影：空，
};
this.handleDelete=this.handleDelete.bind（this）；
}
handleDelete=电影=>{
const movies=this.setState.movies.filter（m=>m.\u id！==movie.\u id）；
this.setState（{movies}）；
}
render（）{
return（this.handleelete（this.props.movie）}
className=“btn btn危险btn sm”>
删去
);
}
}

看起来您键入了

this.setState.movies.filter

应该是

this.state.movies.filter

，因此：

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

---

看起来您键入了

this.setState.movies.filter

应该是

this.state.movies.filter

，因此：

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

---

this.setState.movies

我想这应该是

this.state.movies

我认为使用

setState

？@jsilva设置状态是惯例，但是使用

const movies=this.setState.movies.filter（…）

您没有设置它。您正试图访问它，这需要通过访问

this.state

来完成。你在代码的其他部分也做得对，所以我猜这是一个打字错误？另外，处理程序必须在类内部才能访问

this

this.setState.movies

我想这应该是

this.state.movies

我认为使用

setState

？@jsilva来设置状态是一种惯例，但是使用

const movies=this.setState.movies.filter（…）

您没有设置它。您正试图访问它，这需要通过访问

this.state

来完成。你在代码的其他部分也做得对，所以我猜这是一个打字错误？此外，处理程序必须位于类内部才能访问

this

。使用

=>

可以绑定

this

关键字，因此我不必执行

this.handleDelete=this.handleDelete.bind（this）如果我是正确的。@jsilva你是正确的。类属性语法隐式地将方法绑定到它周围的上下文。@trixn是的，我是新来的，所以我每天都在努力学习。再次感谢你的帮助！使用
=>
可以绑定
this
关键字，这样我就不必执行
this.handleDelete=this.handleDelete.bind（this）如果我是正确的。@jsilva你是正确的。类属性语法隐式地将方法绑定到它周围的上下文。@trixn是的，我是新来的，所以我每天都在努力学习。再次感谢你的帮助！