Javascript 删除按钮删除电影卡

我试图在我的删除按钮代码中找到错误，但是找不到它-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

---

HOME.js

import React, { PureComponent } from 'react'
import {movies} from "./movies.js"
import Card from "./Card.js"
import "./Home.css"

class Home extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            movieslist: movies   
        }
    }

    deleteCard = (removeTitle) => {
        // var newMovieList = [...this.state.movieslist];
        // newMovieList.splice(newMovieList.findIndex(({title}) => title !== removeTitle), 1);
        const newMovieList = this.state.movieslist.filter(movie => movie.title !== removeTitle);
        this.setState({
            movieslist:newMovieList 
        })
    }

    render() {
        return (
            <div className="homecontainer">
                {
                    this.state.movieslist.map(movie => {
                    return <Card delete={this.deleteCard} key={movie.id} title={movie.title} category={movie.category} likes={movie.likes} dislikes={movie.dislikes} />
                    })
                }
            </div>
        )
    }
}

export default Home

import React, { PureComponent } from 'react'
import "./Card.css"

class Card extends PureComponent {
constructor(props) {
    super(props)

    this.state = {
        active:false
    }

    this.toggleClass=this.toggleClass.bind(this)
    this.handleClick=this.handleClick.bind(this)
}

toggleClass(){
    const currentState = this.state.active;
    this.setState({ active: !currentState });
}

handleClick(){
    this.props.delete();
}

render() {
    return (
            <div className="cardbox">
                <div className="cardtitle">{this.props.title}</div>
                <div>{this.props.category}</div>
                <div>{this.props.likes / this.props.dislikes}</div>
                <i onClick={this.toggleClass} className={this.state.active?"fa fa-thumbs-up":"fa fa-thumbs-down"}></i>
                <button onClick={this.handleClick}>Delete</button>
            </div>    
    )
}

import React，{PureComponent}来自“React”
从“/movies.js”导入{movies}
从“/Card.js”导入卡片
导入“/Home.css”
类Home扩展了PureComponent{
建造师（道具）{
超级（道具）
此.state={
电影列表：电影
}
}
deleteCard=（removeTitle）=>{
//var newMovieList=[…this.state.movieslist]；
//拼接（newMovieList.findIndex（（{title}）=>title！==removeTitle），1）；
const newMovieList=this.state.movieslist.filter（movie=>movie.title！==removeTitle）；
这是我的国家({
电影列表：新电影人
})
}
render（）{
返回(
{
this.state.movieslist.map（movie=>{
回来
})
}
)
}
}
导出默认主页

---

CARD.js

import React, { PureComponent } from 'react'
import {movies} from "./movies.js"
import Card from "./Card.js"
import "./Home.css"

class Home extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            movieslist: movies   
        }
    }

    deleteCard = (removeTitle) => {
        // var newMovieList = [...this.state.movieslist];
        // newMovieList.splice(newMovieList.findIndex(({title}) => title !== removeTitle), 1);
        const newMovieList = this.state.movieslist.filter(movie => movie.title !== removeTitle);
        this.setState({
            movieslist:newMovieList 
        })
    }

    render() {
        return (
            <div className="homecontainer">
                {
                    this.state.movieslist.map(movie => {
                    return <Card delete={this.deleteCard} key={movie.id} title={movie.title} category={movie.category} likes={movie.likes} dislikes={movie.dislikes} />
                    })
                }
            </div>
        )
    }
}

export default Home

import React, { PureComponent } from 'react'
import "./Card.css"

class Card extends PureComponent {
constructor(props) {
    super(props)

    this.state = {
        active:false
    }

    this.toggleClass=this.toggleClass.bind(this)
    this.handleClick=this.handleClick.bind(this)
}

toggleClass(){
    const currentState = this.state.active;
    this.setState({ active: !currentState });
}

handleClick(){
    this.props.delete();
}

render() {
    return (
            <div className="cardbox">
                <div className="cardtitle">{this.props.title}</div>
                <div>{this.props.category}</div>
                <div>{this.props.likes / this.props.dislikes}</div>
                <i onClick={this.toggleClass} className={this.state.active?"fa fa-thumbs-up":"fa fa-thumbs-down"}></i>
                <button onClick={this.handleClick}>Delete</button>
            </div>    
    )
}

import React，{PureComponent}来自“React”
导入“/Card.css”
类卡扩展了PureComponent{
建造师（道具）{
超级（道具）
此.state={
活动：错误
}
this.toggleClass=this.toggleClass.bind（this）
this.handleClick=this.handleClick.bind（this）
}
toggleClass（）{
const currentState=this.state.active；
this.setState（{active:！currentState}）；
}
handleClick（）{
this.props.delete（）；
}
render（）{
返回(
{this.props.title}
{this.props.category}
{this.props.likes/this.props.dislikes}
删去
)
}

}

---

导出默认卡

您更新的状态错误

你把新的状态放到newMovieList而不是movieslist

因此，将其更改为：

deleteCard = (removeTitle) => {
    var newMovieList = [...this.state.movieslist];
    newMovieList.splice(newMovieList.findIndex(({title}) => title === removeTitle), 1);
    this.setState({
        movieslist:newMovieList 
    })
}

更新：

You are not passing the title in DeletCard. Change it to:

handleClick(){
     this.props.delete(this.props.title);
}

您可以稍微改进代码：

var newMovieList = [...this.state.movieslist];
newMovieList.splice(newMovieList.findIndex(({title}) => title === removeTitle), 1);

可能是

const newMovieList = this.state.movieslist.filter(movie => movie.title !== removeTitle);

要缩短代码的长度，请执行以下操作：

 render() {
    const {title, category, likes, dislikes } = this.props;
    return (
            <div className="cardbox">
                <div className="cardtitle">{title}</div>
                <div>{category}</div>
                <div>{likes / dislikes}</div>
                <i onClick={this.toggleClass} className={this.state.active?"fa fa-thumbs-up":"fa fa-thumbs-down"}></i>
                <button onClick={this.handleClick}>Delete</button>
            </div>    
    )
}

render（）{
const{title，category，likes，dislikes}=this.props；
返回(
{title}
{类别}
{喜欢/不喜欢}
删去
)
}

显然，您收到的信息（或多或少）“这只是一堵代码墙；也许您可以提供一些解释？”反复重复同一句话并不是我们想要的。对此表示歉意：确实发生了这样的事情！确保在问题中包含遇到的错误/问题（您应该更新此问题，以避免看到它因“不清楚/缺乏详细信息”而被删除）谢谢，非常有用！我现在遇到的一个问题是，它总是删除最后一个元素，而不是单击的元素…为什么？我忘记了一个！请检查我的答案。谢谢，还想知道是否需要声明变量newMovieList，因为它仍然不起作用确保必须将const放在itThanks前面！我尝试使用这个方法：const newMovieList=this.state.movieslist.filter（movie=>movie.title！==removeTitle），但现在当我单击删除按钮时，任何内容都不会消失