React点击卡片获取评论数据后无法正常展示的问题排查

核心问题 #

你遇到的渲染问题根源有两个：

1. 数据类型不匹配：API返回的是单个评论对象，但你将其直接赋值给了声明为数组的reviews状态，导致调用map方法时报错（对象没有map方法）。
2. HTML结构不规范：在<ul>标签内直接嵌套<div>不符合HTML语义规范，<ul>的子元素必须是<li>。

修复步骤 #

1. 修正API数据处理逻辑 #

修改getCommentFromApi中处理返回数据的代码，把单个评论对象包装成数组，适配map渲染：

if (response.ok) {
    const data = await response.json();
    // 将单个对象转为数组，确保后续map能正常执行
    setReviews([data]);
    console.log(data);
}

如果未来API可能返回多个评论的数组，可以做兼容处理：

if (response.ok) {
    const data = await response.json();
    // 兼容单个对象或数组的返回格式
    setReviews(Array.isArray(data) ? data : [data]);
    console.log(data);
}

2. 修正HTML列表结构 #

将评论渲染部分的<div>替换为<li>，符合<ul>的语义要求：

<ul>
    {reviews.map((review) => (
        <li key={review._id}>
            <p>Comment: {review.comment}</p>
            <p>Rate: {review.rate}</p>
            <p>Element ID: {review.elementId}</p>
        </li>
    ))}
</ul>

3. 可选：添加无评论提示 #

当没有评论数据时，显示友好提示：

<ul>
    {reviews.length === 0 ? (
        <li>暂无评论</li>
    ) : (
        reviews.map((review) => (
            <li key={review._id}>
                <p>Comment: {review.comment}</p>
                <p>Rate: {review.rate}</p>
                <p>Element ID: {review.elementId}</p>
            </li>
        ))
    )}
</ul>

额外优化点 #

• 取消卡片选中时清空评论数据：避免下次选中时显示旧数据

  useEffect(() => {
      if (selected) {
          getCommentFromApi();
      } else {
          setReviews([]);
          setErrors(null);
      }
  }, [selected])
  

• 统一错误状态变量名：你声明的状态变量是error，但更新函数是setErrors，建议改为const [error, setError] = useState(null)，避免混淆。

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