React电影卡片删除按钮代码Bug排查求助

嘿，我快速扫了一遍你的代码，立刻就找到删除按钮没反应的问题啦！核心原因是Card组件调用删除方法时没传递关键参数，导致Home组件里的删除函数根本不知道该移除哪条电影数据。

具体问题分析 #

在Card组件的handleClick方法里，你是这么调用删除函数的：

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

但Home组件的deleteCard函数明明需要一个removeTitle参数来定位要删除的电影：

deleteCard = (removeTitle) => {
  const newMovieList = this.state.movieslist.filter(movie => movie.title !== removeTitle);
  this.setState({ movieslist:newMovieList })
}

没传参数的话，removeTitle会是undefined，过滤条件movie.title !== undefined会把所有电影都保留下来，自然点了删除按钮也没变化。

快速修复方案 #

只需要修改Card组件的handleClick方法，把当前电影的title传递给删除函数就行：

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

这样deleteCard就能拿到正确的标题，过滤数组时精准移除对应的电影条目了。

更健壮的优化建议 #

用title匹配删除虽然能解决当前问题，但如果有标题相同的电影，就会误删多条数据。更稳妥的方式是用电影的唯一标识id来判断：

1. 修改Home组件的deleteCard函数，改为通过id过滤：

deleteCard = (removeId) => {
  const newMovieList = this.state.movieslist.filter(movie => movie.id !== removeId);
  this.setState({ movieslist: newMovieList })
}

2. 在Home组件渲染Card时，把id传递给Card：

<Card 
  delete={this.deleteCard} 
  key={movie.id} 
  id={movie.id}  {/* 新增这一行 */}
  title={movie.title} 
  category={movie.category} 
  likes={movie.likes} 
  dislikes={movie.dislikes} 
/>

3. 修改Card组件的handleClick方法，传递id参数：

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

这样就能确保只会删除对应id的电影，彻底避免误删的情况。

内容的提问来源于stack exchange，提问作者Charlinhovdb