React Redux-移除项目的问题

Question

我正在react项目中实现漂亮的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'],
}

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

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

我得到这个错误：

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

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

Answer 1

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

Answer 2

如果数据是对象，则无法筛选state.users。要么你改变initialData的形状，要么如果它真的是这样，那么你必须采取某种方法从对象中删除一个键。

case REMOVE_USER_ACTION:
const users = { ...state.users };
delete users[action.id];
return {
...state,
users,
}

Answer 3

users是一个对象，而不是一个数组，因此不能在上迭代

以下是使用Object.entries的可能解决方案

case REMOVE_USER_ACTION:
return {
...state,
users: Object.entries(state.users).reduce((acc, [key, value]) => {
if (key !== action.id) {
acc[key] = value;
}
return acc;
}, {})
}