React函数组件RenderComments触发渲染无返回值报错如何解决？

• 组件返回值缺失：RenderComments 仅处理了 comments 非空的场景，当 comments 为 null/undefined 时没有返回任何内容，React 要求组件必须返回 JSX、null 等合法渲染值，这是报错的直接原因。
• props 取值逻辑错误：当前 RenderComments 内写的是 comments.comments.map，如果你调用组件时传入的是评论数组本身，不需要多写一层 .comments，否则会触发 undefined 调用 map 的错误。
• 逻辑冗余：你把 <h4>Comments</h4> 写在 map 循环内，会导致每一条评论前都重复出现标题，需要把标题提到循环外部。

1. 重写 RenderComments 函数：

function RenderComments({ comments }) {
  // 空值直接返回null，符合React组件返回要求
  if (!comments) return null;
  return (
    <div>
      <h4>Comments</h4>
      {comments.map((item) => (
        <ul key={item.id} className="list-unstyled">
          <li>{item.comment}</li>
          <li>
            --{item.author} 
            {new Intl.DateTimeFormat("en-US", {
              year: "numeric",
              month: "short",
              day: "2-digit"
            }).format(new Date(Date.parse(item.date)))}
          </li>
        </ul>
      ))}
    </div>
  );
}

2. 修改 DishDetails 内的组件调用参数，传入正确的评论数组：

<div className="col-12 col-sm-12 col-md-5 m-1">
  {/* 从dish属性下取评论数组，可选链避免空值报错 */}
  <RenderComments comments={props.dish?.comments} />
</div>

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