Блог

Я пытаюсь выполнить рендеринг post.paragraph , поступающий из хранилища Redux.

Это код, который я использую:

     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}
     />
  

Хотя кажется, что для отображения требуется время post.paragraph , поэтому мое приложение терпит неудачу. На самом деле, если console.log(post.paragraph) я получаю «undefined» дважды, и только тогда я получаю свое post.paragraph отображение.

Чтобы устранить проблему, я попытался поместить все в оператор if следующим образом:

     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}
         />
  

Но теперь я получаю следующую ошибку:

Я также попробовал следующее, но получаю ту же ошибку:

     const postDetails = useSelector((state) => state.postDetails);
        const { loading, post, error } = postDetails; 
          const editorContent =   !loading ?
    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}
         />
  

Как я должен решить этот асинхронный запрос? Большое спасибо!