状态对象结构已更改答案

【问题标题】：State Object structure changed状态对象结构已更改
【发布时间】：2016-10-09 17:27:42
【问题描述】：

我编写了一个带有数据库交互的小型待办事项列表应用程序。一切正常，除了当我尝试从我的状态中删除一个待办事项列表项时，对象状态结构发生了变化。因此，我不再能够在运行时呈现我的 ToDo 列表。

我假设只需要对我的 reducer 代码进行一点改动，但我对 ES6 和 Redux 有一点经验，可以自己完成它。

这是我的减速器代码：

export default (state = {items: []}, action) => {
switch (action.type){
    case 'RECEIVE_POSTS':
        return Object.assign({}, state, {
            items: action.items
        });
    case 'ADD_ITEM':
        return Object.assign({}, state, {
            items: [
                ...state.items,
                action.items
            ]
        });
    case 'REMOVE_ITEM':
        return Object.assign({}, state, {
            items: [
                state.items.filter((items, id) => id !== action.id)
            ]
        });
    default:
        return state
    }
   }

还有我的 deleteItem - 操作

export default function deleteItem(id){
console.log("test")
return (dispatch, getState) => {
    return dispatch (removeItem(dispatch, id))
    return dispatch (receiveDelete(id))
   }
 }

 function removeItem(dispatch, id){
   return dispatch => {
    $.ajax({
        method: "POST",
        url: "http://localhost:444/localWebServices/removeTask.php",
        data: {id: id}
    }).success(function(msg){
        console.log(msg)
        dispatch(receiveDelete(id))
    });
    }
   }

  function receiveDelete(id){
   console.log("receive add")
   return {
    type: 'REMOVE_ITEM',
    id: id
    }
   }

这里是我删除一个项目之前和之后对象结构的两张图像。

为了明确这一点。一切正常（列表已呈现），但在我删除一个项目后，状态结构已更改-> 未呈现列表。我没有收到任何错误消息。

删除前：

删除后：

任何帮助都会很棒！

更新：

我更改了代码，不再返回数组。根据开发控制台，状态现在似乎是正确的，但它没有渲染。这段代码是否朝着正确的方向发展？

return Object.assign({}, state, {
            items: state.items.filter((items, id) => id !== action.id)
        });

【问题讨论】：

所以在删除时，您要添加所有当前项加上一组不符合id的项？
如果你不写代码，你应该怎么学习？
好吧，它不起作用（而且你走得越远 - 你的路径效率就越低）。
那么你期待什么样的答案呢？您是否希望有人为您编写可以复制粘贴的代码？
我在第一条评论中给出了提示。另一个提示：你执行删除后state.items的类型是什么？

标签： javascript object reactjs redux

【解决方案1】：

传递给过滤器回调的参数是arrayElement, index, array，因此请尝试将您的回调更改为.filter(item => item.id !== action.id)

【讨论】：