为什么不能直接给SunEditor组件传Props？总是显示上一次渲染的旧数据

问题原因 #

• 第一段代码同时使用了两种赋值方式，触发时机不一致导致数据冲突：你既给<SunEditor>组件传递了setContents={postContent}属性，又在useEffect中调用编辑器实例的core.setContents方法赋值，两种赋值逻辑的执行时机不同步，就会出现新旧内容覆盖异常，残留陈旧数据。
• 编辑器实例初始化时机滞后：getSunEditorInstance拿到编辑器核心实例的时间晚于组件首次渲染，首次触发postContent对应的useEffect时，editor.current大概率还是未赋值的状态，这次赋值操作会直接失效，编辑器就会保留初始的旧内容。

为什么中间加一层state就能正常运行 #

• 新增本地state相当于做了一层更新缓冲：postContent更新后先同步到本地content state，等state更新触发第二次渲染和对应的useEffect时，编辑器实例大概率已经初始化完成，调用setContents就不会失效。
• 两种赋值路径的数据源统一为本地state：组件prop传的setContents和实例方法赋值都用同一个content值，更新时机对齐，不会出现新旧值冲突的问题。

更简洁的优化方案 #

其实不需要额外新增本地state，只要避免同时使用两种赋值逻辑即可：

const SunEditorForRendering: React.FC<Props> = ({postContent }) => {
  const [content, setContent] = useState("hello world");

  const handleOnChange = (value) => {
    setContent(value)
  }

  return <SunEditor
    setContents={postContent ?? content}
    onChange={handleOnChange}
  />
}

只通过组件setContents属性传值即可，不需要额外获取实例调用方法，也不需要多一层state中转，就能避免陈旧数据问题。

内容的提问来源于stack exchange，提问作者user82554