React+Redux删除操作后如何重新渲染同一组件？

Hey Rajath, let's break down why your component isn't re-rendering after deleting an item and fix it step by step.

问题根源 #

Right now, you're using history.push('/mcenter') after the delete request succeeds—but since you're already on the /mcenter route, React Router won't unmount and remount your component. Without a route change or a state update that your component is subscribed to, it won't re-render to reflect the deleted item.

解决方案1：依赖Redux State更新触发渲染（推荐） #

The cleanest fix is to make sure your component re-renders when the Redux state updates after deletion. Here's how to adjust your code:

1. 确保Reducer正确处理DELETE_CONTENT动作

Your reducer needs to update the state by removing the deleted item from your content list. For example:

// contentReducer.js
import { DELETE_CONTENT } from './actionTypes';

const initialState = {
  contentItems: [] // 假设你的内容列表存在这里
};

export default function contentReducer(state = initialState, action) {
  switch (action.type) {
    case DELETE_CONTENT:
      // 过滤掉被删除ID的项，返回新的state
      return {
        ...state,
        contentItems: state.contentItems.filter(item => item.id !== action.payload.id)
      };
    // 处理其他action类型...
    default:
      return state;
  }
}

2. 修改Action，移除不必要的路由跳转

Since we're relying on state updates to trigger re-rendering, you don't need to push to the same route anymore. Update your action:

// action.js
export const deleteContentItem = (id) => dispatch => {
  axios.delete(`${API_ROOT}/mcenter/admin/delete/${id}`)
    .then(res => {
      // 传递被删除的ID给reducer（或者用res.data里的ID，如果后端返回的话）
      dispatch({ 
        type: DELETE_CONTENT, 
        payload: { id } 
      });
      // 移除history.push('/mcenter')——不需要跳转了
    })
    .catch(err => dispatch({ 
      type: GET_ERRORS, 
      payload: err.response.data 
    }));
};

3. 确保组件订阅Redux State

Make sure your component is receiving the updated contentItems from Redux as props. For example:

// McenterComponent.js
class McenterComponent extends React.Component {
  delete = (id) => {
    this.props.deleteContentItem(id); // 不需要传递history了
  };

  render() {
    // 从props获取更新后的内容列表
    const { contentItems } = this.props;

    return (
      <div className="mcenter-content">
        {contentItems.map(item => (
          <div key={item.id} className="content-item">
            <h3>{item.title}</h3>
            <button onClick={() => this.delete(item.id)}>删除</button>
          </div>
        ))}
      </div>
    );
  }
}

// 连接Redux，映射state到props
const mapStateToProps = state => ({
  contentItems: state.content.contentItems // 对应reducer里的state结构
});

export default connect(mapStateToProps, { deleteContentItem })(McenterComponent);

解决方案2：强制路由刷新（备选） #

If you absolutely need to trigger a route refresh (e.g., for edge cases where state updates aren't sufficient), you can use history.replace('/mcenter') instead of push, or add a dynamic key to your route component to force remounting:

// 在路由配置中给组件添加动态key
<Route 
  path="/mcenter" 
  component={() => <McenterComponent key={Date.now()} />} 
/>

Note: This is a more brute-force approach and should be used sparingly—relying on state updates is always better practice.

关键检查点 #

• Double-check that your reducer is returning a new state object (not mutating the existing one)—React/Redux relies on immutability to detect changes.
• Ensure your component is actually using the contentItems prop from Redux in its render method (if it's using local state instead, that won't update when Redux state changes).

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