mercredi 18 novembre 2020

How can i handle this async operation?

I am trying to render post.paragraph coming from the Redux store.

This is the code i am using:

const postDetails = useSelector((state) => state.postDetails);
const { loading, post, error } = postDetails; 

const editorContent =   post ?
EditorState.createWithContent(convertFromRaw(JSON.parse(post.paragraph))) : 
EditorState.createEmpty();

const [editorState, setEditorState] = useState({ editorState: editorContent });

const handleEditorChange = (editorState) => { setEditorState({ editorState }) }

const submitHandler = (e) => {
    e.preventDefault();
    dispatch(
      updatePost({
        _id: id,
        title,
        image,
        images,
        paragraph: JSON.stringify(
          convertToRaw(editorState.editorState.getCurrentContent())
        ),
      })
    );
  };

<Editor
   editorState={editorState.editorState}
   onEditorStateChange={handleEditorChange}
 />

Though it seems like it takes time for post.paragraph to display therefore my app fails. Infact, if i console.log(post.paragraph) i get "undefined" twice and only then i get my post.paragraph displayed.

enter image description here

To fix the issue i tried to put everything in an if statement like this:

const postDetails = useSelector((state) => state.postDetails);
    const { loading, post, error } = postDetails; 
    const content = (async (err, res) => {
    const editorContent = await post.paragraph;
      if (post.paragraph) {
        res.send({ editorContent: EditorState.createWithContent(convertFromRaw(JSON.parse(post.paragraph))) });
      } else {
          res.send({ editorContent: EditorState.createEmpty()});
        }
        return editorContent;
      })


    const [editorState, setEditorState] = useState({ editorState: content });
    
    const handleEditorChange = (editorState) => { setEditorState({ editorState }) }
    
    const submitHandler = (e) => {
        e.preventDefault();
        dispatch(
          updatePost({
            _id: id,
            title,
            image,
            images,
            paragraph: JSON.stringify(
              convertToRaw(editorState.editorState.getCurrentContent())
            ),
          })
        );
      };
    
    <Editor
       editorState={editorState.editorState}
       onEditorStateChange={handleEditorChange}
     />

But the now the error i get is the following:

enter image description here

How should i takle this async request? Many Thanks

Aucun commentaire:

Enregistrer un commentaire