Draft.js - 无法从数据库中获取数据.跨域错误 [英] Draft.js - Unable to get data from the database. Cross-origin error

问题描述

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

I am trying to use Draft.js in the Blog app I am creating. It all seems fine when saving data to the database and getting it back, just I cannot seem to get createWithContent to work.

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

When I write the following, the data does get saved to the database as I am simply creating an empty editor which then is updated by the user and sent to the database after 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 填写的段落)，我收到以下错误:

which is what I really want (the paragraph to be filled out with the post.paragrah coming from the database), I get the following error:

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

A cross-origin error was thrown. React doesn't have access to the actual error object in development.

我正在以这种方式处理跨域:

I am taking care of cross-origin this way:

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) 时，我确实得到了我的段落:

Also, when i console.log(post.paragraph) i do get my paragraph:

但我注意到在收到我的段落之前我也得到了 2 个 undefined 这可能是问题的一部分.

but what i noticed is that i also get 2 undefined before receiving my paragraph and this could be part of the issue.

为了解决这个问题，我已经尝试了这两个:

To fix this i have tried both this:

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

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

I have done lots of research on the web but I didn't manage to come up with anything successfull. Hope you guys can help. Thanks in advance

推荐答案

主要问题是当你试图解析 JSON 内容时，

The main problem is when you trying to parse the JSON content,

JSON.parse(post.paragraph)

内容未定义.这就是您收到错误的原因.在加载数据之前，您不应呈现内容.在我的特殊问题如下:

the content is undefined. That's why you're getting the error. You shouldn't render the content until the data is loaded. In my particular problem was the following:

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 客户端调用异步查询.但是，在渲染调用中，我遇到了与您相同的错误.然后，我添加了以下代码，以等待数据加载.加载数据后，触发钩子并重新渲染组件.

In this piece of code, I am calling an async query through the apollo client. However, on the rendering call, I was getting the same error as yours. Then, I have added the following code, to wait until data is loaded. After data is loaded, the hook is triggered and re-rendered the component.

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

这篇关于Draft.js - 无法从数据库中获取数据.跨域错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！