尽管事件触发，但未呈现React组件

Question

我正在用react、next.js和创建一个博客。我已经到了动态加载博客文章和其他UI的程度，但是现在当我尝试动态加载评论时，它是行不通的。

所讨论的组件是这个。

const Comments = ({ id }) => {
  const [com, setCom] = useState([]);

  useEffect(() => {
    const getComments = async () => {
      const comment = await fetchPost(id);

      if (comment["comments"].length == 0) return;

      const comments = [...comment["comments"]];

      setCom([...comment["comments"]]);
    };

    getComments();
  }, []);

  return (
    <div>
      {com.map((p) => {
        console.log(p.comment);
        <Comment key={p.id} comment={p.comment} />;
      })}
    </div>
  );
};

我知道组件正在被调用，当我将其记录到地图中的控制台时，它就有了这些信息。我无法理解的是为什么它没有渲染，因为它是我如何渲染博客帖子的一个近乎碳拷贝。

除上述各点外，我还尝试了以下几点：

<Post/>

• 检查了运行<Comment/>的语法

• ，该语法中和没有键

• 直接在组件com.map中插入字符串，而p.comment ==没有将

• 提升状态和useEffect呈现为

Answer 1

您的函数没有返回任何内容，所以function没有什么可渲染的。

{com.map((p) => (
  <Comment key={p.id} comment={p.comment} />;
))}

下面的代码不返回任何内容

() => { const value = 1; }

以下代码返回1

() => { const value = 1; return value;}

以下代码返回1

() => 1