Draft.js - 无法从数据库中获取数据。跨域错误

Question

我正在尝试在我正在创建的博客应用程序中使用 Draft.js。将数据保存到数据库并将其取回时，一切似乎都很好，只是我似乎无法让 createWithContent 工作。

当我编写以下内容时，数据确实会保存到数据库中，因为我只是创建一个空编辑器，然后由用户更新并在 convertToRaw 之后发送到数据库。

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

但是当我使用时

EditorState.createWithContent(convertFromRaw(JSON.parse(post.paragraph)))

这是我真正想要的（用来自数据库的 post.paragrah 填写的段落），我收到以下错误：

引发了跨域错误。 React 无法访问 开发中的实际错误对象。

我以这种方式处理跨域：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*'); 
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization'); 
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS'); 
  next();
});

另外，当我使用 console.log(post.paragraph) 时，我确实得到了我的段落：

但我注意到，在收到我的段落之前我也得到了 2 个未定义，这可能是问题的一部分。

为了解决这个问题，我已经尝试了这两种方法：

const editorContent =   post ?
    EditorState.createWithContent(convertFromRaw(JSON.parse(post.paragraph))) : 
    EditorState.createEmpty();
    
    const [editorState, setEditorState] = useState({ editorState: editorContent });

还有这个：

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 });

我在网络上做了很多研究，但我没有成功地想出任何东西。 希望大家能帮忙。提前致谢

Answer 1

主要问题是当您尝试解析 JSON 内容时，

JSON.parse(post.paragraph)

内容未定义。这就是您收到错误的原因。在加载数据之前，您不应该呈现内容。我的具体问题如下：

const BlogPostPage: React.FC<MatchProps> = (props: MatchProps) => {

const classes = useStyles();

const { data, loading, error } = useGetBlogQuery({
    variables: {
        id: props.match.params.id
    }
});


return (
    <BlogPostContent markdown={data?.blog?.contentJson}></BlogPostContent>
);
}

在这段代码中，我通过 apollo 客户端调用异步查询。但是，在渲染调用中，我遇到了与您相同的错误。然后，我添加了以下代码，以等待数据加载。加载数据后，触发钩子并重新渲染组件。

    if (loading) return (<>{"loading..."}</>);