Question

我已经编写了一个带有数据库交互的小型待办事项列表应用。一切正常，除了当我尝试从我的状态中删除toDo-list项时，对象状态结构被更改。因此，我不再能够在运行时呈现我的待办事项列表。

我认为我的减速器代码只需要进行一些小改动，但我对ES6＆amp; amp; 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
    }
   }

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

说清楚。一切正常（列表被渲染），但在我删除一个项目后，状态结构被更改 - ＆gt;列表未呈现。我没有收到任何错误信息。

删除前：

删除后：

任何帮助都会很棒！

更新

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

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

Answer 1

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

状态对象结构已更改

1 个答案: