Reactjs TypeError无法读取属性'；查找'；未定义的

我正在创建一个react redux todo应用程序，在UI中单击view时出现此错误。我试图查看每个待办事项，但出现了此错误，我已多次尝试摆脱此错误，但仍然出现此错误

import React from "react";
import { useSelector } from "react-redux";

export const SingleTodoPage = ({ match }) => {
  const { todoId } = match.params;

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

  return (
    <div>
      <h2>{todo.name}</h2>
      <p>{todo.description}</p>
    </div>
  );
};

从“React”导入React；
从“react redux”导入{useSelector}；
导出常量SingleTodoPage=（{match}）=>{
const{todoId}=match.params；
常量todo=useSelector（（状态）=>{
state.todos.find（（todo）=>todo.id==todoId）；
});
返回(
{todo.name}
{todo.description}

);
};

这里是链接

问题 当您配置存储时，您将

TodoReducer

reducer添加为

todo

，而不是

todos

：

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

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

在您引用的选择器中

state.todos

：

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

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

第二个问题是选择器还需要返回一个值

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

解决方案 通过执行以下操作之一，正确/一致地引用状态

更新减速器名称以匹配选择器中的用法

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

更新选择器用法以匹配根目录

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

修复选择器以同时返回一个值

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

由于

array.prototype.find

还返回

undefined

，如果没有找到匹配项，您的UI应该处理此问题。有条件地呈现匹配结果，如果未找到

todo

，则为null

export const SingleTodoPage = ({ match }) => {
  const { todoId } = match.params;

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

  return todoId ? (
    <div>
      <h2>{todo.name}</h2>
      <p>{todo.description}</p>
    </div>
  ) : null;
};

export const singletodpage=（{match}）=>{
const{todoId}=match.params；
常量todo=useSelector（（状态）=>{
返回状态.todo.find（（todo）=>todo.id==todoId）；
});
回到今天(
{todo.name}
{todo.description}

)：null；
};

---

非常感谢，我收到了it@sultan伟大的如果此答案解决了您的问题，请将其标记为已接受。如果你也觉得它和解释有帮助，那么请不要忘记也投票。干杯