Невозможно удалить элемент из массива в React

Question

Я пытаюсь отобразить данные из другого файла в компоненте таблицы в React. Данные отображаются, но метод удаления не работает. Я не уверен, какую ошибку я совершил здесь. Я не получаю никаких ошибок консоли, и кнопка удаления говорит, что она нажата в консоли.

Mov ie. js

import React, { Component } from 'react'
import { Table } from 'react-bootstrap';
import Data from './data';

export default class Movie extends Component {
    constructor(){
        super();
        this.state={
            movies:Data
        }
        console.log(this.state.movies)
        this.handleDelete=this.handleDelete.bind(this);
    }

    handleDelete= movie=>{
        const del=this.state.movies.filter(item => item !== movie.id);
        this.setState({
            movie:del
        })
        console.log("clicked")
    }
    render() {
        //const store=this.state.movies.id;
        const show= this.state.movies.map((movie,i)=>{
            return(
       <tr key={i}>
         <td>{movie.id}</td>
         <td>{movie.name}</td>
         <td>{movie.price}</td>
         <td>{movie.rating}</td>
        <td> <button onClick={()=>this.handleDelete(movie)}>Delete</button></td>
       </tr>
        )})
        return (
            <div>
                <Table striped bordered hover>
                <thead>
                    <tr>
                    <th>#</th>
                    <th>Movie</th>
                    <th>Price</th>
                    <th>Rating</th>
                    </tr>
                </thead>
                <tbody>
                    {show}
                </tbody>

</Table>
            </div>
        )
    }
}

Данные. js

  const i=[
    {
    id:1,
    name:"Captain america",
    price:"$10",
    rating:'5 stars'
    },
    {
        id:2,
        name:"Batman",
        price:"$12",
        rating:'4 stars'
    },
    {
        id:3,
        name:"Arrow",
        price:"$8",
        rating:'3 stars'
    }
]
const data=i;

export default data;

Answer 1

Сначала у вас есть опечатка, а во-вторых, вы не проверяете, не равен ли идентификатор mov ie идентификатору элемента текущего цикла.

// item.id !== movie.id
const del = this.state.movies.filter(item => item.id !== movie.id);

// movies not movie
this.setState({
   movies: del
})

Также никогда не используйте индекс как ключ в производстве (если элементы не являются c), это анти-шаблон . Вместо этого используйте уникальный идентификатор <tr key={movie.id}>

Answer 2

в функции handleDelete

handleDelete= movie=>{
        const del=this.state.movies.filter(item => item !== movie.id);
        this.setState({
            movie:del <=== movies not movie!
        })
        console.log("clicked")
    }

Я думаю, что вы просто опечатываете mov ie вместо фильмов при установке состояния