React组件未渲染问题求助：Posts组件中Post子组件无法渲染排查

兄弟，我一眼就揪出问题啦——你的Posts组件里，map回调函数压根没返回Post子组件！虽然你能通过console.log打印出正确的post对象，但因为没把组件返回给React，它根本不知道要渲染这些内容😅

问题代码分析 #

看你这段代码：

{posts?.map((p) => {
  { console.log(p); }
  <Post post={p} />;
})}

这里用大括号{}作为箭头函数的函数体，里面的<Post post={p} />只是一个孤立的表达式，没有被return出去。所以map最终返回的是一堆undefined，自然不会渲染任何组件。另外console.log(p)外面的额外大括号也是多余的语法哦。

修复方案 #

两种简单的修复方式，选哪种都可以：

方式1：显式返回组件

给回调函数加上return语句，同时别忘了给列表元素加上唯一的key（React列表渲染的强制要求，用post._id就很合适）：

{posts?.map((p) => {
  console.log(p);
  return <Post post={p} key={p._id} />;
})}

方式2：使用箭头函数的隐式返回

把函数体的大括号换成小括号，箭头函数会自动返回括号里的内容：

{posts?.map((p) => (
  <>
    {console.log(p)}
    <Post post={p} key={p._id} />
  </>
))}

额外提醒 #

一定要记得给map渲染的每个组件加上key属性，这是React的最佳实践，能帮助React高效更新列表，避免不必要的重渲染和控制台警告。

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