Why i Can not use Props directly in SunEditor component, it's showing previous render data?

383 Views Asked by At

I am passing props in component and using directly in suneditor..

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

    const editor = useRef<SunEditorCore>();
  // The sunEditor parameter will be set to the core suneditor instance when this function is called
  const getSunEditorInstance = (sunEditor: SunEditorCore) => {
    editor.current = sunEditor;
  };


 useEffect(() => {
    if (postContent) {
      editor.current?.core.setContents(postContent);
    }
  }, [postContent]);

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

Above code does not work as expected and content of editor is stale many times. But if i do not use postcontent directly and first save it in a state and then set state to editor , it works correctly. Working code is

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

    const editor = useRef<SunEditorCore>();
  // The sunEditor parameter will be set to the core suneditor instance when this function is called
  const getSunEditorInstance = (sunEditor: SunEditorCore) => {
    editor.current = sunEditor;
  };


 useEffect(() => {
    if (postContent) {
     setContent(postContent);//----> first save postcontent to new state
    }
  }, [postContent]);


useEffect(() => {
    if (content) {
      editor.current?.setContents(content)//---> here set content to editor
    }
  },[content]);

         <SunEditor
          getSunEditorInstance={getSunEditorInstance}
          setContents={content}
          onChange={handleOnChange}

        />
}

There are other code also , but they are same in both of the situations described above

0

There are 0 best solutions below