时间戳

首页 > 解决方案 > React Redux - 删除项目的问题

reactjs - React Redux - 删除项目的问题

问题描述

我正在我的 react 项目中实现 beautiful-dnd。

我有以下数据：

const initialData = {
        users: {
            'user-1': { id: 'user-1', name: 'John'},
            'user-2': { id: 'user-2', name: 'Patrick'},
            'user-3': { id: 'user-3', name: 'Malorie'},
            'user-4': { id: 'user-4', name: 'Eric'},
            'user-5': { id: 'user-5', name: 'Bob'},
            'user-6': { id: 'user-6', name: 'Blob'}
        },
        areas: {
            'area-0': {
                id: 'area-0',
                title: 'Main Area',
                userIds: ['user-1', 'user-2', 'user-3', 'user-4', 'user-5', 'user-6']
            },
            'area-1': {
                id: 'area-1',
                title: 'Area 1',
                userIds: []
            },
            'area-2': {
                id: 'area-2',
                title: 'Area 2',
                userIds: []
            }
        },
        areaOrder: ['area-0', 'area-1', 'area-2'],
    }

在减速器中，我尝试以这种方式删除其中一个用户：

case REMOVE_USER_ACTION:
    return {
        ...state,
        users: [ ...state.users.filter(user => user !== action.id) ]
    }

我收到此错误：

TypeError：e.users.filter 不是函数或其返回值不可迭代

我搜索了这个错误，但我找不到类似的场景以及如何解决这个问题。

标签： reactjsreduxreact-redux

解决方案

TypeError：e.users.filter 不是函数或其返回值不可迭代

这意味着这users不是一个数组，object而是。

所以可以通过这种方式获取过滤后的用户：

const users = {'user-1':{id:'user-1',name:'John'},'user-2':{id:'user-2',name:'Patrick'},'user-3':{id:'user-3',name:'Malorie'},'user-4':{id:'user-4',name:'Eric'},'user-5':{id:'user-5',name:'Bob'},'user-6':{id:'user-6',name:'Blob'}};

const actionId = "user-1";
const filteredUsers = Object.entries(users).filter(([key, value]) => value.id != actionId);
console.log(Object.fromEntries(filteredUsers));

结果，你REMOVE_USER_ACTION看起来像

case REMOVE_USER_ACTION:
    return {
        ...state,
        users: filteredUsers
    }

但是，您应该根据性能、有意义的名称和干净的代码users将类型从object更改为。array

const users = [{ id: 'user-1', name: 'John'},
         { id: 'user-2', name: 'Patrick'},
         { id: 'user-3', name: 'Malorie'},
         { id: 'user-4', name: 'Eric'},
         { id: 'user-5', name: 'Bob'},
         { id: 'user-6', name: 'Blob'}
       ];
       
const actionId = "user-1";
const filteredUsers = users.filter(item => item.id != actionId);
console.log(filteredUsers);

推荐阅读