React开发评论组件子评论不显示与层级缩进异常问题排查

问题1：子评论全部无法展示的原因 #

你的showSubComments函数存在两个问题：

• 没有返回map生成的JSX数组：你调用了subComments.map()生成了子评论DOM，但没有把这个数组返回给组件渲染，函数执行完默认返回undefined，React会直接忽略这部分内容
• 空值返回不规范：当子评论为空时直接return，返回值是undefined，不符合React的渲染要求，应该显式返回null

修复后的showSubComments代码参考：

const showSubComments = (subComments) => {
    if(subComments.length === 0)
        return null;
    // 加return把map结果返回
    return subComments.map((obj, index) => {
        return (
            <>
                <br />
                <span style={{marginLeft: '2rem'}}>{obj.comment}</span>
                {showSubComments(obj.subComments || [])}
            </>
        )
    });
}

问题2：调整后"4!"评论缩进异常的原因 #

核心错误是读取子评论时拼接的key和存储时的key规则不一致：
你存储子评论到Map时的key规则是${父级完整路径},${当前层级索引}，比如第三个一级评论（数组索引为2）的第二个子评论（"4!"）对应的存储key前缀是2,1，它的子评论应该对应key2,1,xxx。
但你在displaySubComments函数读取子评论时，没有传入当前的父级完整路径，直接用${index.toString()},${index}拼接key，也就是"4!"对应的索引是1，你拼接的key是1,1，这个key恰好匹配到了第二个一级评论（数组索引为1）的第二个子评论的存储路径，导致你错误读取了其他分支的子评论数据，递归渲染时margin被错误累加，最终出现缩进异常。

修复方案：给displaySubComments增加父级路径参数，拼接key时使用完整父路径：

const displaySubComments = (subCommentsArr, margin, parentKey) => {
    return subCommentsArr.map((obj, index) => {
        const currentKey = `${parentKey},${index}`;
        return (
            <span key={currentKey} style={{marginLeft: `${margin}rem`, display: 'block'}}>
                {obj.comment}
                {displaySubComments(subComments.get(currentKey) || [], margin+2, currentKey)}
            </span>
        )
    })
}
// 调用处传入初始父key
{displaySubComments(subComments.get(index.toString()) || [], 2, index.toString())}

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