React+Redux删除分类后状态未即时刷新问题求助

嘿，我帮你找到了两个关键问题，正是它们导致点击删除后Redux状态没即时更新：

1. Reducer里的致命笔误（核心原因） #

先看你Reducer中DELETE_CATEGORY分支的代码：

return {
 ...state,
 categories: state.categories.filter (category=>category._id !== category.payload)
}

这里犯了一个低级错误：你用了category.payload，但category是数组里的单个分类对象，它根本没有payload属性！正确的应该是引用action.payload——也就是你在action里传入的分类ID。

修复后的Reducer代码：

case DELETE_CATEGORY:
 return {
  ...state,
  categories: state.categories.filter(category => category._id !== action.payload)
 }

这个笔误会让filter条件永远为true（category._id是字符串，category.payload是undefined，两者必然不等），所以原数组完全没被过滤，状态自然不会变化。而刷新页面后，组件重新调用getCategories从后端拉取数据，这时候后端已经删掉了分类，所以显示正确，但Redux本身的状态在删除操作时其实根本没更新。

2. 子组件的Props名称不匹配 #

看父组件给子组件传的props：

<CategoryCard 
  name={category.name} 
  type={category.type} 
  id={category._id} 
  handleDeleteCategory={this.handleDeleteCategory} 
/>

但子组件接收的参数却是deleteCategory：

const SimpleCard = ({ classes, name, type, id, deleteCategory })=>{

这里的props名称完全不匹配，子组件里的deleteCategory会是undefined，点击删除按钮时可能根本没触发deleteCategory action（除非你代码里把SimpleCard重命名成了CategoryCard，但props名还是不对）。

修复很简单，保持两边名称一致就行：

方案一：修改父组件的props传递 #

<CategoryCard 
  name={category.name} 
  type={category.type} 
  id={category._id} 
  deleteCategory={this.handleDeleteCategory} 
/>

方案二：修改子组件的props接收 #

const SimpleCard = ({ classes, name, type, id, handleDeleteCategory })=>{
 const onDeleteCategory = (categoryId) => {
  handleDeleteCategory(categoryId);
 }
 // ... 其他代码不变
}

额外验证建议 #

你可以在Reducer的DELETE_CATEGORY分支里加一句console.log(action.payload)，确认action的payload确实是正确的分类ID；同时检查ShowCategoriesPage的mapStateToProps，确保组件能正确接收到更新后的categories状态，比如：

const mapStateToProps = state => ({
 categories: state.categories // 假设你的reducer挂载在state.categories路径下
});

这样修改后，点击删除按钮时Redux状态应该会立即更新，组件也会自动重新渲染，再也不需要手动刷新页面了。

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