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

时间:2019-04-09 09:10:29

标签: reactjs redux

参考代码

//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中,需要在执行删除操作后刷新同一页面。

我的问题是:

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

任何帮助将不胜感激。

3 个答案:

答案 0 :(得分:0)

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
            })
        );
}

答案 1 :(得分:0)

您只需要setState,其中状态是返回的数据或错误?

答案 2 :(得分:0)

我为您找到了解决方案。那些日子我也有同样的问题。无论如何,我的一位朋友告诉我,使所有事情都不变是解决方案。问题不在行动中。您必须对减速器进行一些更改。

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;
}

}

使用这种方法。