React组件未渲染排查：获取数据库数据后组件不渲染原因分析

核心问题是**map的回调函数没有返回要渲染的JSX元素**。

看你这段渲染代码：

{todos.map((todo) => {
  console.log(todo);
  console.log(todo.text);
  <div key={todo._id}>
    {todo.text}
    {`${todo.completed}`}
  </div>
})}

因为你用大括号{}包裹了回调逻辑，但没有显式写return语句，所以map执行后返回的是一个由undefined组成的数组，React无法渲染任何有效内容——虽然控制台能打印出todo数据，但这些数据并没有被用来生成JSX返回给组件。

两种修复方式： #

• 显式添加return：

{todos.map((todo) => {
  console.log(todo);
  console.log(todo.text);
  return <div key={todo._id}>
    {todo.text}
    {`${todo.completed}`}
  </div>
})}

• 改用小括号实现隐式返回：
  把回调的大括号换成小括号，JS会自动返回括号里的最后一个表达式：

{todos.map((todo) => (
  console.log(todo),
  console.log(todo.text),
  <div key={todo._id}>
    {todo.text}
    {`${todo.completed}`}
  </div>
))}

额外提醒：确保todos的初始状态是数组（比如const [todos, setTodos] = useState([])），避免组件挂载初期因为todos不是数组而触发map报错。

内容的提问来源于stack exchange，提问作者최석규