React嵌套评论应用回复父节点时页面崩溃，提示handleInsertNode不是函数

看起来你遇到的核心问题有两个方面，先从最直接的报错原因说起——Comment组件里的handleInsertNode函数未被正确传入，再来说嵌套节点插入逻辑的问题。

1. 直接报错原因：Comment组件未接收handleInsertNode props #

看你的Comment.js代码，onAddComment里直接调用了handleInsertNode，但这个函数既不是Comment组件内部定义的，也没有通过props从父组件（App.js）传递进来，所以运行时必然会抛出“handleInsertNode is not a function”的错误。

修复步骤： #

• 在App.js渲染Comment组件（包括递归渲染子评论时），需要把handleInsertNode作为props传递给Comment组件。假设你是递归渲染评论：

// App.js里渲染评论的部分
const renderComments = (comments) => {
  return comments.map(comment => (
    <Comment
      key={comment.id}
      comments={comment}
      handleInsertNode={handleInsertNode} {/* 关键：传递这个核心函数 */}
      // 其他需要的props（如编辑/删除函数）也记得同步传递
    />
  ));
};

// 在App的return中调用渲染逻辑
{renderComments(commentsData)}

• 在Comment.js里，显式接收这个props并使用：

// Comment.js
const Comment = ({ comments, handleInsertNode, /* 其他需要的props */ }) => {
  // ... 你的其他内部逻辑

  const onAddComment = () => {
    if (editMode) {
      handleEditMode(comments.id, inputRef?.current?.innerText);
    } else {
      console.log("DATA HERE", comments.id, input);
      setExpand(true);
      handleInsertNode(comments.id, input); // 现在函数来自props，不会报错
      setShowInput(false);
      setInput("");
    }
  };

  // ... 剩余组件代码
};

2. useNode的insertNode函数逻辑问题 #

你的insertNode函数存在两个关键问题，会导致插入节点逻辑失效：

问题a：未处理数组类型的评论树 #

你的commentsData是数组（从useState(comments)的初始化逻辑能看出），但insertNode一开始就判断tree.id === commentId——数组本身没有id属性，永远匹配不到目标父节点；后续的tree?.items?.map也会因为tree是数组而tree.items为undefined，触发额外错误。

问题b：直接修改原状态对象 #

你用tree?.items?.push(...)直接修改了原有的tree对象，这违反了React的状态不可变性原则，会导致状态更新不触发组件重新渲染，或者出现不可预测的页面行为。

修复后的insertNode函数： #

const insertNode = (tree, commentId, item) => {
  // 先处理数组类型的评论列表
  if (Array.isArray(tree)) {
    return tree.map(node => insertNode(node, commentId, item));
  }

  // 匹配到目标父节点，返回全新的节点对象（不修改原数据）
  if (tree.id === commentId) {
    return {
      ...tree,
      items: [
        ...(tree.items || []),
        {
          id: new Date().getTime(),
          name: item,
          items: [],
        }
      ]
    };
  }

  // 递归处理子节点，返回新的节点对象
  return {
    ...tree,
    items: tree.items ? insertNode(tree.items, commentId, item) : []
  };
};

另外，你的handleInsertNode函数里用了await，但insertNode是同步函数，完全没必要，直接去掉即可：

// App.js
const handleInsertNode = (commentId, comment) => {
  console.log("HandleInsertNode Func", commentsData);
  const finalTree = insertNode(commentsData, commentId, comment);
  setCommentsData(finalTree);
};

总结 #

先解决第一个props传递的问题（这是报错的直接原因），再修复insertNode的逻辑问题，确保嵌套节点能正确插入且遵循React的状态规则。这样你的回复功能应该就能正常工作了。

备注：内容来源于stack exchange，提问作者Pranav