在Next.js中如何访问对象数据？传递Todo对象至组件报错

结合你的代码截图梳理问题 #

你的Todo对象是包含id、name、done字段的数组项，TodoList负责循环渲染Todo组件，但当前props传递方式有误，导致Todo组件无法正确拿到todo对象。

修正步骤 #

1. TodoList组件正确传递todo对象
   在循环渲染Todo组件时，要把单个todo对象通过props明确传递，代码示例：

// TodoList中的循环部分
{todos.map(todo => (
  <Todo key={todo.id} todo={todo} />
))}

注意：每个Todo必须绑定唯一key（用todo.id即可），同时确保传递的属性名为todo

2. Todo组件正确接收并访问name
   如果是函数组件，直接解构props里的todo：

function Todo({ todo }) {
  return <div>{todo.name}</div>
}

如果是类组件，通过this.props访问：

class Todo extends React.Component {
  render() {
    return <div>{this.props.todo.name}</div>
  }
}

常见报错排查 #

• 若出现Cannot read properties of undefined (reading 'name')：检查TodoList是否传递了todo={todo}，或者属性名是否写错（比如误写成todoItem）
• 若数组存在空值：先过滤无效项再循环，比如todos.filter(Boolean).map(...)

内容的提问来源于stack exchange，提问作者maztt