在嵌套评论中回复时分页

Question

我正在 React 创建一个嵌套评论应用程序。虽然在父节点中添加注释工作正常，但是回复同一节点会破坏页面。子节点不能正常工作。下面是代码的解释。

评论.js

const onAddComment = () => {
    if (editMode) {
      handleEditMode(comments.id, inputRef?.current?.innerText);
    } else {
      console.log("DATA HERE", comments.id, input);
      setExpand(true);
      handleInsertNode(comments.id, input); <-- this function breaks the page
      setShowInput(false);
      setInput("");
    }
  };

return (
...
<Action type="REPLY PARENT" handleClick={onAddComment} />
...
)

应用程序.js

const [commentsData, setCommentsData] = useState(comments);
const { insertNode, editNode, deleteNode } = useNode(); <-- this is custom hook created

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

使用节点

const insertNode = (tree, commentId, item) => {
    if (tree.id === commentId) {
      tree?.items?.push({
        id: new Date().getTime(),
        name: item,
        items: [],
      });
      return tree;
    }

    let latestNode = [];
    latestNode = tree?.items?.map((newItems) => {
      return insertNode(newItems, commentId, item);
    });

    return { ...tree, items: latestNode };
  };

虽然经过彻底测试，但是错误仍然存在。 “REPLY PARENT”按钮的工作方式与“COMMENT”按钮完全相同，但是，单击它时会抛出错误，因为“handleInsertNode 不是一个函数，并且具有相同的通用

onAddComment

函数”。我无法检测到的明显错误可能是什么。这是沙箱的链接 --> https://codesandbox.io/p/sandbox/nested-comments-app-52jdsh

Answer 1

问题是您没有在返回的 Comment.js 文件中声明预期的 prop

handleInsertNode

，您在评论列表中呈现每个评论

{comments?.items?.map((data) => {
        return <Comment key={data.id} comments={data} />;
      })}

应该是

{comments?.items?.map((data) => {
        return <Comment key={data.id} comments={data} handleInsertNode={(_)=>_} /* insert other default props here */ />;
      })}