Next JS 中的 BlockNote OnChange 问题

Question

输入“/”后，每次我尝试输入某些内容时，组件都会重新渲染，从而使其无法使用。

文件A：

  const update = useMutation(api.documents.updateDocument);
  const onChange = (content: string) => {
    update({
      id: params.documentId,
      content,
    });
  };

<Editor onChange={onChange} initialContent={document.content} />

文件B：

  const editor: BlockNoteEditor | null = useCreateBlockNote({
    initialContent: initialContent
      ? (JSON.parse(initialContent) as PartialBlock[])
      : undefined,
  });
  const uploadToDatabase = useCallback(() => {
    if (onChange) {
      setTimeout(() => {
        onChange(JSON.stringify(editor.document));
      }, 1000);
    }
  }, [editor, onChange]);

        <BlockNoteView
          onChange={uploadToDatabase}
          editable={editable}
          editor={editor}
          theme={resolvedTheme === "dark" ? "dark" : "light"}
        />

我做错了什么？控制台中没有任何错误。感谢您的帮助！

我尝试使用 editor.topLevelBlocks ，但现在已弃用，因此我使用 editor.document 代替，现在我在组件中键入的每个符号都会重新加载。

Answer 1

您是否使用了此处的文档来确保 ssr 为 false？

Answer 2

所以问题是频繁重新渲染？我不太明白超时的目的，你想做一个反跳吗？

如果您想进行优化，使其不会在每次键入时触发渲染，您可以使用 lodash debounce 来实现。 像这样的东西就可以了，

const uploadToDatabase = useCallback(
    debounce(() => {
        onChange(JSON.stringify(editor.document));
    }, 300), // set any time you want
    [editor, onChange]
);

要跟踪组件渲染的次数，请使用 useRef，这样它就不会影响渲染。

const renderCount = useRef(0);

renderCount.current += 1;

if (process.env.NODE_ENV !== "production") {
    console.log(`Render count: ${renderCount.current}`);
}