在Todo应用程序中创建删除函数时出错Redux:TypeError:state.byIds.filter不是函数

Question

我试图在redux中创建一个delete_TODO调度函数，但我得到了一个错误："TypeError:state.byIds.filter不是函数">

我不太明白为什么有人能解释我，我相信这是一件愚蠢的小事，但我没有看到

import { ADD_TODO, TOGGLE_TODO, DELETE_TODO } from "../actionTypes";
const initialState = {
allIds: [],
byIds: {},
};
export default function (state = initialState, action) {
switch (action.type) {
case ADD_TODO: {
const { id, content } = action.payload;
return {
...state,
allIds: [...state.allIds, id],
byIds: {
...state.byIds,
[id]: {
content,
completed: false,
},
},
};
}
case TOGGLE_TODO: {
const { id } = action.payload;
return {
...state,
byIds: {
...state.byIds,
[id]: {
...state.byIds[id],
completed: !state.byIds[id].completed,
},
},
};
}
//here is the probleme
case DELETE_TODO: {
const { id } = action.payload;
return {
...state,
allIds: state.allIds.filter((todo) => todo !== id),
byIds: state.byIds.filter((todo) => todo !== id),
};
}
default:
return state;
}
}

Answer 1

您的意思是您的byIds属性在初始状态下是数组类型而不是对象，因为.filter不是文本对象原型的一部分吗？

const initialState = {
allIds: [],
byIds: [],
};

Answer 2

state.byId是一个对象而不是数组，filter作用于数组而不是对象。你必须使byId成为一个数组。试试这个：

import { ADD_TODO, TOGGLE_TODO, DELETE_TODO } from "../actionTypes";
const initialState = {
allIds: [],
byIds: [],
};
export default function (state = initialState, action) {
switch (action.type) {
case ADD_TODO: {
const { id, content } = action.payload;
return {
...state,
allIds: [...state.allIds, id],
byIds: [
...state.byIds,
[id]: {
content,
completed: false,
},
],
};
}
case TOGGLE_TODO: {
const { id } = action.payload;
return {
...state,
byIds: [
...state.byIds,
[id]: {
...state.byIds[id],
completed: !state.byIds[id].completed,
},
],
};
}
//here is the probleme
case DELETE_TODO: {
const { id } = action.payload;
return {
...state,
allIds: state.allIds.filter((todo) => todo !== id),
byIds: state.byIds.filter((todo) => todo !== id),
};
}
default:
return state;
}
}