React访问todo.text报undefined属性读取错误解决方法

Cannot read properties of undefined (reading 'text') 报错说明你在访问undefined值的text属性，对应你的代码，问题出在两处：

• 组件导入错误：你在App.js中将单条待办项组件TodoItem导入后命名为TodoList使用，但TodoItem本身只负责渲染单个待办条目，不是处理整个待办数组的列表组件。
• Props传参与接收不匹配：你给组件传入的Prop是todos={todos}（值为整个待事项数组），但TodoItem组件内部解构接收的参数是todo（期望拿到单个待办对象），组件始终拿不到todo这个入参，它的值自然是undefined。

1. 新建列表组件TodoList #

在src/components路径下新建TodoList.js文件，负责遍历待办数组，为每个待办条目渲染对应的TodoItem组件：

// src/components/TodoList.js
import React from "react";
import TodoItem from "./TodoItem";

const TodoList = ({ todos }) => {
  return (
    <div className="todo-list">
      {todos.map((todo, idx) => (
        <TodoItem key={idx} todo={todo} />
      ))}
    </div>
  );
};

export default TodoList;

提示：如果后续你需要对待办列表做删除、拖拽排序等操作，不要用数组下标idx作为key，最好给每个待办项加全局唯一的id字段作为key值，避免渲染异常。

2. 修正App.js的组件导入 #

把App.js里原来指向错误的TodoList导入语句，改成指向你刚新建的TodoList文件：

// 原错误写法：import TodoList from "./components/TodoItem";
// 替换为正确路径
import TodoList from "./components/TodoList";

3. （可选）增加容错逻辑 #

可以在TodoItem组件开头加个空值判断，后续如果出现漏传props的情况不会直接导致页面崩溃：

// 修改后的TodoItem.js
import React from "react"

const TodoItem = ({todo}) => {
  // 未接收到合法todo参数时直接不渲染内容
  if (!todo) return null;
  return(
    <div className="todo-item">
      <div>{todo.text}</div>
      <button type="button" className="todo-btn primary">toggle</button>
    </div>
  )
}

export default TodoItem;

改完之后刷新页面，报错就会消失，三个初始待办项都能正常渲染。

内容的提问来源于stack exchange，提问作者Ariq Fikri Tamamy