React中如何渲染树形API评论数据并解决data.map报错问题

报错根本原因 #

data.map is not a function 说明传入Tree组件的data参数不是数组类型，只有数组才有map方法。即使你给参数设了默认值data = []，如果传入的值是对象、null等非undefined类型，默认值不会生效，就会触发该报错。
结合你用的接口返回结构验证：接口返回的根数据是单个评论对象，不是数组，如果你直接把接口返回的完整数据传给Tree组件，必然会触发该报错。

具体修复方案 #

1. 修正父组件传入的初始数据 #

接口返回的根评论对象结构如下：

{
  "id": 12701272,
  "text": "根评论内容",
  "children": [/* 子评论数组 */],
  // 其他字段
}

根据你的渲染需求调整传入值：

• 要连同根评论一起渲染：把根对象包成数组传入 data={[apiResult]}
• 只渲染根评论下的所有子评论：直接传入children字段 data={apiResult.children || []}

2. 给Tree组件加数组类型校验，添加兜底逻辑 #

修改Tree组件代码，不管传入什么值都先转成安全数组，避免报错，同时补充map遍历的key属性，消除React警告：

const Tree = ({ data = []}) => {
  // 类型兜底，确保一定是数组
  const safeData = Array.isArray(data) ? data : [];
  return (
    <div className="d-tree">
      <ul className="d-flex d-tree-container flex-column">
        {safeData.map((tree) => (
          <TreeNode node={tree} key={tree.id} />
        ))}
      </ul>
    </div>
  );
};

3. 补全TreeNode组件的子数据兜底 #

部分叶子节点评论的children字段可能返回null而非空数组，修改TreeNode组件传入Tree的参数，添加兜底：

{hasChild && childVisible && (
  <div className="d-tree-content">
    <ul className="d-flex d-tree-container flex-column">
      {/* 这里加|| []兜底 */}
      <Tree data={node.children || []} />
    </ul>
  </div>
)}

4. 修正父组件接口请求的初始状态 #

如果父组件存接口数据的state初始值设为了{}，第一次渲染时传入Tree的就是对象，需要把初始值改为null，并且加加载判断，等接口返回后再渲染组件：

// 父组件参考代码
import React, { useState, useEffect } from 'react';
import Tree from './Tree';

const CommentPage = () => {
  const [commentData, setCommentData] = useState(null);

  useEffect(() => {
    fetch('https://hn.algolia.com/api/v1/items/12701272')
      .then(res => res.json())
      .then(data => setCommentData(data))
  }, [])

  // 加载中状态
  if (!commentData) return <div>评论加载中...</div>

  // 按需传入数据，这里演示连根评论一起渲染
  return <Tree data={[commentData]} />
}

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