我正在努力了解 Redux。用 React 和 Redux 做类似 TODO APP 的事情。我可以添加新任务，更新其值，但无法正确删除该项目。我总是收到错误消息Unhandled Rejection (TypeError): Cannot read property 'id' of undefined。我将 ID 传递给 Delete 函数，就像我在 Update 函数中所做的那样。服务器端运行良好。该fetch功能本身有效，并且从数据库中删除项目有效，但客户端出现错误，请各位大侠帮忙
const initialState = {
list: [],
}
export default (state = initialState, action) => {
switch (action.type) {
case GET_TASKS: {
return { ...state, list: action.tasks }
}
case CREATE_TASK: {
return { ...state, list: [...state.list, action.task] }
}
case UPDATE_STATUS: {
return {
...state,
list: state.list.map((it) => {
return action.task.id === it.id ? action.task : it
}),
}
}
case DELETE_TASK: {
return {
list: state.list.map((it) => {
return action.task.id !== it.id ? action.task : it
}),
}
}
default:
return state
}
}
export function getTasks() {
return (dispatch) => {
fetch("/api/task")
.then((r) => r.json())
.then(({ data: tasks }) => {
dispatch({ type: GET_TASKS, tasks })
})
}
}
export function deleteTask(id) {
return (dispatch) => {
fetch(`/api/v1/task/${id}`, {
method: "DELETE",
})
.then((r) => r.json())
.then(({ data: task }) => {
dispatch({ type: DELETE_TASK, task })
})
}
}
我的第一个问题是，在你的deleteTask方法中，这里返回了什么？删除方法是否真的返回您删除的任务？
.then(({ data: task }) => {
dispatch({ type: DELETE_TASK, task })
}
如果没有，另一种解决此问题的方法是task将调度中的更改为id要传递给deleteTask方法的 ：
dispatch({ type: DELETE_TASK, id });
然后在您的减速器中使用 filter 方法而不是 map 来返回与该已删除任务的 id 不匹配的任务，有效地将其从您的状态中“删除”：
case DELETE_TASK: {
return {
list: state.list.filter((it) => {
return action.id !== it.id;
}),
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句