React-Redux：删除项目不会重新渲染数组答案

【问题标题】：React-Redux: deleting an item does not re-render the arrayReact-Redux：删除项目不会重新渲染数组
【发布时间】：2018-04-18 10:16:14
【问题描述】：

我通过将邀请的 ID 传递到后端来删除邀请，这很有效。但是，我的减速器无法正常工作，无法重新渲染新的、过滤的邀请数组。当我刷新页面时，已删除的邀请消失了。我做错了什么？

动作：

export function deleteInvitation(id) {
    const user = JSON.parse(localStorage.getItem('user'));
    console.log('now deleting id ', id);
    return function(dispatch) {
        axios
            .delete(`${ROOT_URL}/invitation/`, {
                headers: { authorization: user.token },
                params: { id: id }
            })
            .then(response => {
                console.log(id);
                dispatch({
                    type: DELETE_INVITATION,
                    id
                });
            });
    };
}

减速器：

export default function(state = {}, action) {
    switch (action.type) {
        case INVITATION_SUCCESS:
            return { ...state, invited: true, error: {} };
        case INVITATION_FAILURE:
            return { ...state, invited: false, error: { invited: action.payload } };
        case FETCH_INVITATIONS:
            return { ...state, invitations: action.payload };
        case DELETE_INVITATION:
            return {
                ...state,
                invitations: state.invitations.filter(_id => _id !== action.id)
            };
        default:
            return state;
    }
}

【问题讨论】：

Is this the correct way to delete an item using redux?的可能重复
state.invitations的结构是什么？过滤器 - state.invitations.filter(_id => _id !== action.id) - 似乎应该是 state.invitations.filter(invitation => invitation._id !== action.id)
是的，完美。我搞砸了 lambda 函数。请将此添加为答案，我会接受。

标签： javascript reactjs react-redux axios

【解决方案1】：

我在猜测invitations数组的结构...

在 reducer 中，过滤器功能似乎不正确。该操作正在传递id 属性，我猜这是invitation 对象的属性。但是过滤器功能是从state.invitations 过滤对象，其中对象是id。也就是说，reducer 正在做这样的事情：

const action = {id: 0}

const invitation = [{
    _id: 0,
    name: 'Name 0',
    location: 'Location 0'
  },
  {
    _id: 1,
    name: 'Name 1',
    location: 'Location 1'
  },
  {
    _id: 2,
    name: 'Name 2',
    location: 'Location 2'
  }
];

console.log(invitation.filter(_id => _id !== action.id));

这将返回完整的原始数组，因为过滤器函数正在检查action.id（一个数字）与invitation（一个对象）的不等式。基本上：

{
  _id: 0,
  name: 'Name 0',              !===       number
  location: 'Location 0'
}

将为任何num 和/或任何invitation 对象返回true，因此过滤器函数将返回state.invitations 中的每个项目。

要更正此问题，请检查 invitation._id 与 action.id，如下所示：

const action = {id: 0}

const invitation = [{
    _id: 0,
    name: 'Name 0',
    location: 'Location 0'
  },
  {
    _id: 1,
    name: 'Name 1',
    location: 'Location 1'
  },
  {
    _id: 2,
    name: 'Name 2',
    location: 'Location 2'
  }
];

console.log(invitation.filter(invitation => invitation._id !== action.id));

【讨论】：