javascript - 使用createSlice中的reducer从redux状态的数组中删除元素
问题描述
我一直在用这个来挠我的大脑一段时间,如果有任何帮助,我将不胜感激。
我正在将 React 与 Redux Toolkit 一起使用,即使 Redux 按预期响应,我仍在努力让 React 从我的 UI 中删除“待办事项”。在 Redux 开发人员工具中,removeTodo 按预期工作,从 todos 数组状态中删除一个 todo,但 React 没有跟随,因此我的 UI 不会随之改变。我的 addTodo 操作在 React 和 Redux 中都按预期工作。
当我单击调用 removeTodo 调度的按钮时,我当前的代码向我提供了以下错误。
TypeError: Cannot read property 'length' of undefined
App
C:/Users/joeee/Documents/redux-middleware/src/app/App.js:13
10 |
11 | return (
12 | <div style={divStyles}>
> 13 | <TodosForm />
| ^ 14 | {todos.length > 0 && <TodoList />}
15 | </div>
16 | )
View compiled
▶ 19 stack frames were collapsed.
应该注意的是,当我的 todos 数组状态的长度 > 0 时,我只在我的 TodoList 组件中进行渲染,因为我不希望在没有 todos 时渲染该组件。我是 React 和 Redux 的新手,可能有一个非常简单的解决方案,但据我所知,当调用 removeTodo 时,todos 数组状态被完全删除,而不是仅仅返回那些 id 不等于传入的 id . 这就是为什么我假设我得到的错误是告诉我它无法读取 undefined 的 .length ,因为我的 todos 状态现在是空的。
我删除了 todos.length 需要大于 0 才能呈现 TodoList 的要求,但后来我得到了它无法读取 TodoList 中未定义(我的 todos 状态)的 .map 的错误,这对我来说强化了我的整个 todos状态似乎正在被删除。
这是我的 todosSlice:
import { createSlice } from '@reduxjs/toolkit';
export const todosSlice = createSlice({
name: 'todos',
initialState: {
todos: [],
},
reducers: {
addTodo: (state, action) => {
const { id, task } = action.payload;
state.todos.push({ id, task })
},
removeTodo: (state, action) => {
// console.log(state.todos);
const { id } = action.payload;
// console.log(id);
return state.todos.filter(item => item.id !== id);
}
},
});
export const selectTodos = state => state.todos.todos;
export const { addTodo, removeTodo } = todosSlice.actions;
export default todosSlice.reducer;
应用程序.js:
import React from 'react';
import { useSelector } from 'react-redux';
import TodosForm from '../components/TodosForm';
import TodoList from '../components/TodoList';
import { selectTodos } from '../features/todosSlice';
export const App = () => {
const todos = useSelector(selectTodos);
// console.log(todos.length);
return (
<div style={divStyles}>
<TodosForm />
{todos.length > 0 && <TodoList />}
</div>
)
}
export default App;
TodoList.js
import React from 'react';
import { useSelector } from 'react-redux';
import { selectTodos } from '../features/todosSlice';
import Todos from './Todos';
const TodoList = () => {
const todos = useSelector(selectTodos);
// console.log(todos);
return (
<div style={divStyles}>
<h3 style={headerStyles}>Your Todos: </h3>
{todos.map(todo => <Todos key={todo.id} task={todo.task} id={todo.id} />)}
</div>
)
}
export default TodoList
Todos.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'
import { faEdit } from '@fortawesome/free-solid-svg-icons'
import { removeTodo } from '../features/todosSlice';
const Todos = ({ task, id }) => {
const dispatch = useDispatch();
const handleDeleteClick = () => {
dispatch(removeTodo({id: id}));
}
return (
<div style={divStyles}>
<li style={listStyles}>{task}</li>
<div>
<button className="faEditIcon" style={btnStyles}><FontAwesomeIcon icon={faEdit}/></button>
<button className="faDeleteIcon" style={btnStyles} onClick={handleDeleteClick}><FontAwesomeIcon icon={faTrashAlt}/></button>
</div>
</div>
)
}
export default Todos;
还有我的 store.js
import { configureStore } from '@reduxjs/toolkit';
import todosSliceReducer from '../features/todosSlice';
export default configureStore({
reducer: {
todos: todosSliceReducer,
},
});
解决方案
您可以如下更新 removeTodo 并查看。
removeTodo: (state, action) => {
// console.log(state.todos);
const { id } = action.payload;
// console.log(id);
state.todos = state.todos.filter(item => item.id !== id)
}
推荐阅读
- android - tcp android 客户端 服务器 c linux vm
- python - 梯度计算所需的变量之一已通过就地操作进行了修改:[torch.cuda.FloatTensor [640]] 为版本 4;
- python - 将对象的函数作为参数传递给另一个函数
- android - 如何正确处理手机跨平台多登录内购服务器同步?
- android - 尝试在 Android Studio 中添加 Google Admob 时清单合并失败
- django - 管理员登录后如何重定向到另一个页面(Django)
- javascript - 有没有办法在服务器上不断运行 django 以根据实时数据更新数据库
- android - 如何在矢量图像中获得发光效果?
- javascript - 如何将跨度值传递给控制器 laravel?
- reactjs - 如何获取带有经纬度的地址?