使用react和redux删除后如何重新渲染相同的组件？答案

【问题标题】：How to re-render the same component after deleting using react and redux?使用react和redux删除后如何重新渲染相同的组件？
【发布时间】：2019-04-10 03:21:41
【问题描述】：

参考代码

//Component
delete = (id) => {
    this.props.deleteContentItem(id, this.props.history)
}

//action.js
export const deleteContentItem = (id, history) => dispatch => {
    axios.delete(`${API_ROOT}/mcenter/admin/delete/${id}`)
        .then(res => {
            dispatch({
                type: DELETE_CONTENT,
                payload: res.data
            })
            history.push('/mcenter')
        })
        .catch(err =>
            dispatch({
                type: GET_ERRORS,
                payload: err.response.data
            })
        );
}

我在/mcenter URL 中，删除操作后需要刷新同一页面。

我的问题是：

删除后不会重新渲染组件。

任何帮助将不胜感激。

【问题讨论】：

history.push('/mcenter') 的用途是什么？这样做有什么目的吗？
因为它没有重新渲染所以我试图强制它导航

标签： reactjs redux

【解决方案1】：

export const deleteContentItem = (id, history) => dispatch => {
    axios.delete(`${API_ROOT}/mcenter/admin/delete/${id}`)
        .then(res => {
            dispatch({
                type: DELETE_CONTENT,
                payload: res.data
            })
           this.getsomedata();//get any data for your page inside then
        })
        .catch(err =>
            dispatch({
                type: GET_ERRORS,
                payload: err.response.data
            })
        );
}

【讨论】：

【解决方案2】：

是否只需要 setState ，其中 state 是返回的数据或错误？

【讨论】：

【解决方案3】：

我为您找到了解决方案。那些天我也有同样的问题。无论如何，我的一位朋友告诉我，让一切不可变是解决方案。问题不在于行动。您必须对减速器进行一些更改。

import { List } from 'immutable';

export default function (state = {loading:false}, action) {
switch (action.type) {
     case 'DELETE_CONTENT':
        let currentProjects = List(state.Plist)
        let index = currentProjects.findIndex(i=>i.ProjectId===action.payload)
        let newProjectList = currentProjects.splice(index,1).toJS();
        return { ...state, Plist: newProjectList ,loading:false};
     default:
        return state;
}

}

使用这种方法。

【讨论】：