类型错误：无法读取未定义的属性(读取"待办事项")

Question

当我尝试运行这段代码时，它给了我这个错误:

TypeError: Cannot read properties of undefined (reading 'todos')

如何修复

我想做一个todo列表，将在用户注册后工作，但todo注册后不工作

我代码:

HomePage.js

const HomePage = () => {
const dispatch = useDispatch();
const { isAuth, email } = useAuth();
return isAuth ? (
<div>
<TodoForm />
<button onClick={() => dispatch(removeUser())}>
Log out from {email}
</button>
</div>
) : (
<Redirect to="/login" />
);
};

TodoForm.js

const TodoForm = () => {  
const todos = useSelector((state) => state.todo.todos)
// const todos = useSelector((state) => state.todo.todos);
const dispatch = useDispatch();
const [todoValue, setTodoValue] = useState("");
const addTodoHandler = (e) => {
e.preventDefault();
const todo = {
id: v4(),
text: todoValue,
completed: false,
};
dispatch(addTodo(todo));
setTodoValue("");
};
const handleChange = (e) => {
setTodoValue(e.target.value);
};
console.log(todos);
return (
<>
<form onSubmit={addTodoHandler}>
<input
type="text"
value={todoValue}
onChange={handleChange}
placeholder="Add task"
/>
<button type="submit">Submit</button>
</form>
{todos.map((todo) => (
<TodoList key={todo.id} todo={todo} />
))}
</>
);
};

todoSlice.js

const initialState = {
todos: [],
};
export const todoSlice = createSlice({
name: "todos",
initialState,
reducers: {
addTodo: (state, action) => {
state.todos.push(action.payload);
},
removeTodo: (state, action) => {
state.todos = state.todos.filter((todo) => todo.id !== action.payload);
},
completedTodo: (state, action) => {
const toggleTodo = state.todos.find((todo) => todo.id === action.payload);
toggleTodo.completed = !toggleTodo.completed;
},
},
});

存储

reducer: {
todo: todoSlice,
user: userReducer,
},
});

帮我解决这个问题，我将非常感激

Answer 1

slicename istodosnottodo

const todos = useSelector((state) => state.todos.todos)