1

我正在尝试实现类似移动预览部分的功能，在用户在编辑器中完成操作后，他们所做的更改将同时显示在预览部分中。

我现在面临的问题是我Bulletin.js用来从编辑器中检索 html 内容的方法似乎落后了 1 步（因为我需要执行一些操作，例如单击任意位置或检索所做的最后一个操作在编辑器中）。

我想使更改是即时的，而不是落后一步，这样当用户执行更改字体颜色等操作时，它将立即反映到预览部分。

公告.js

const getContent = (htmlContentProp) => {
    setHtmlContent(draftToHtml(htmlContentProp));
};

<RichTextEditor getContent={getContent} htmlContent={htmlContent} />

富文本编辑器.js

const handleEditorChange = (state) => {
    setEditorState(state);
    getContent(convertToRaw(editorState.getCurrentContent()));
};

编辑 unruffled-ptolemy-8m2cr

4

2 回答 2

3

问题在这里：

const handleEditorChange = (state) => {
    setEditorState(state); // this is asynchronous
    // so this will most likely be old value
    getContent(convertToRaw(editorState.getCurrentContent()));
};

您有 2 个简单的选项来解决此问题

  • 一是这里根本不使用钩子，你可以直接消费你的“状态”
const handleEditorChange = (state) => {
    getContent(convertToRaw(state.getCurrentContent()));
};
  • 如果您出于某种原因需要此处的挂钩，则其他选项是使用useEffect哪个更“正确”的选项
const handleEditorChange = (state) => {
    setEditorState(state); // this is asynchronous
};

useEffect(() => { 
    getContent(convertToRaw(editorState.getCurrentContent()));
}, [editorState]); // this effect will trigger once the editorState actually changes value
于 2021-10-06T00:42:12.657 回答
1

当此行在函数中getContent(convertToRaw(editorState.getCurrentContent()))运行时，尚未使用最新值更新。由于 React 状态更新是异步的handleEditorChangeeditorState

您可以使用中的state参数handleEditorChange获取最新数据，如下所示

const handleEditorChange = (state) => {
  setEditorState(state);
  getContent(convertToRaw(state.getCurrentContent()));
};

或者使用 auseEffect根据子状态的变化来更新父状态。

于 2021-10-06T00:42:52.960 回答