React中useMemo未随依赖更新分组对象导致新评论不渲染求助

问题根源 #

你的根评论分组逻辑存在键值不统一的问题：初始加载的根评论parent字段可能是undefined，而新创建的评论parent是null。undefined和null在对象中是两个不同的键，导致初始根评论被分到group[undefined]，新评论被分到group[null]。但你在Context中只传递了commentsByParentId[null]作为根评论集合，所以新评论无法和旧根评论一起被组件获取；刷新页面后，后端返回的所有评论parent字段统一，分组逻辑才能正常工作。

解决方案 #

方案1：统一分组时的键值

在useMemo的分组逻辑中，将所有评论的parent字段统一转换为null，确保根评论都被分到同一个键下：

const commentsByParentId = useMemo(() => {
    const group = {};
    comments.forEach(comment => {
        // 将undefined转换为null，统一分组键值
        const parentKey = comment.parent ?? null;
        group[parentKey] ||= [];
        group[parentKey].push(comment);
    });
    return group;
}, [comments]);

方案2：在数据加载时标准化格式

在commentReducer的comments/loaded分支中，提前统一所有评论的parent字段为null，从源头解决数据格式不一致问题：

case "comments/loaded":
    // 标准化评论数据，将parent统一为null
    const normalizedComments = action.payload.map(comment => ({
        ...comment,
        parent: comment.parent ?? null
    }));
    return { comments: normalizedComments, isLoading: false, error: null }

额外验证 #

确认使用rootComments的组件没有因memo包装且依赖项设置错误导致不更新，但根据你的描述，核心问题就是分组键值不统一导致的渲染异常。

内容的提问来源于stack exchange，提问作者Горан Китић