我可以停止这种在协作文本编辑器中重新渲染的默认行为吗？

问题描述

所以我最近正在使用 React 和 socket.io 开发这个协作文本编辑器。

我的 app.js 看起来有点像这样：

const [content,updateContent] = useState('');
socket.on("update",(data)=>{
if(access === true){
currContent = data
updateContent(data)
}
  })

  const contentBlock = htmlToDraft(content);
  const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
  const editorState = EditorState.createWithContent(contentState);


  class ControlledEditor extends Component {
constructor(props) {
  super(props);

    this.state = {
      editorState,};
  }


onEditorStateChange: Function = (editorState) => {
  this.setState({
    editorState,});
  if(access===true && user==="Admin"){
  currContent = draftToHtml(convertToRaw(editorState.getCurrentContent()))
  socket.emit("message",[currContent,id])}
};

render() {
  const { editorState } = this.state;
  if(access === true && user==="Admin"){
  return (
    <Editor
      editorState={editorState}
      wrapperClassName="demo-wrapper"
      editorClassName="demo-editor"
      onEditorStateChange={this.onEditorStateChange}
    />
  )})
 }
}

}

发生了什么： 每当房间中的任何人键入内容时，它都会发出一个套接字事件，然后房间中的每个客户端都会侦听该事件，并且每个人都会更改 useState 内容的值，这会强制重新在收到内容的每个客户的编辑器上呈现，因此实际上不可能在您输入时编辑器将其值更改为新内容的同时编写。

应该发生什么：房间里的所有客户都应该获得数据并在他们的编辑器上更新，但所有人都应该能够同时写作，就像在谷歌文档上发生的那样。

我目前正在为此使用 react-draft-wysiwyg，我知道他们还有很多其他文本编辑器可用，如果有任何编辑器可以帮助我解决这个问题，我很乐意更改。

你可以试试这个：https://kalam-editor.herokuapp.com/opendocument 只需输入docid：1234 和密码：1234 也是如此。 （如果显示 docid 不存在，只需点击打开文档按钮 2-3 次）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）