如何修复无法读取未定义的 react-redux 的属性“名称”

Question

我想通过使用 useSelector 钩子从 redux 存储中提取名称，并想编辑该值并保存回存储和更新 ui。最初编辑名称我使用的是 useState 钩子，但它给出了属性名称的错误

无法读取未定义的属性“名称”

store.js

import { configureStore } from "@reduxjs/toolkit";
import TodoReducer from "./TodoSlice";

export default configureStore({
  reducer: {
    todo: TodoReducer
  }
});

todoSlice.js 用于初始状态和减速器逻辑操作

import { createSlice } from "@reduxjs/toolkit";

const initialState = [
  { id: "1", name: "First Post!", description: "Hello!" },
  { id: "2", name: "Second Post", description: "More text" }
];

const TodoSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {
    todoAdded(state, action) {
      state.push(action.payload);
    },
    todoUpdated(state, action) {
      const { id, name, description } = action.payload;
      const existingTodo = state.entities[id];
      if (existingTodo) {
        existingTodo.name = name;
        existingTodo.description = description;
      }
    }
  }
});

export const { todoAdded, todoUpdated } = TodoSlice.actions;
export default TodoSlice.reducer;

和 EditTodo.js 在这里从 TodoSlice 导入动作 todoUpdated，并使用 store 作为 useSelector 钩子，看起来一切都在这里，但它给出错误，我不知道如何解决这个错误，如果有人知道请解决这个问题...codesandbox 完整应用代码链接

Answer 1

useState 钩子不会更新你的 reducer。此外，您实际上并没有以正确的方式设置待办事项。您可以通过以下方式获得待办事项：

 const todo = useSelector((state) =>
    state.todo.find((todo) => todo.id === todoId)
  );

您可以只使用 todo.name 而不使用状态。由于 useSelector 钩子函数作为状态，reducer 也已经在更新待办事项。

编辑：

您实际上需要状态，因为您只在保存单击时调用调度程序。我认为您可以保持 useState 不变，只需更改它，以便 useSelector 实际选择我提到的待办事项