問題

draft.jsを使用してテキストエディタを実装しています。エディタの内容をDBに保存し、後でそれを取得してエディタに再度挿入したいとします。エディタページを再開するとき。

まず、これらは関連する輸入品です

 import { ContentState, EditorState, convertToRaw, convertFromRaw } from 'draft-js';
 

データをDBに保存する方法(親コンポーネントにあります)

 saveBlogPostToStore(blogPost) {
    const JSBlogPost = { ...blogPost, content: convertToRaw(blogPost.content.getCurrentContent())};
    this.props.dispatch(blogActions.saveBlogPostToStore(JSBlogPost));
}
 

DBをチェックすると、次のオブジェクトが表示されます。

 [{"_id":null,"url":"2016-8-17-sample-title","title":"Sample Title","date":"2016-09-17T14:57:54.649Z","content":{"blocks":[{"key":"4ads4","text":"Sample Text Block","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[]}]},"author":"Lukas Gisder-Dubé","__v":0,"tags":[]}]
 

これまでのところ、私はいくつかの他のものを試して、データベース内のオブジェクトは間違いなく変換されていると思います。たとえば、convertToRaw()メソッドを呼び出さずにコンテンツを保存すると、さらに多くのフィールドがあります。

データを新しいEditorStateとして設定する

DBからデータを取得してEditorStateとして設定するには、私もたくさん試しました。以下は私の最高の推測です:

 constructor(props) {
    super(props);
    const DBEditorState = this.props.blogPost.content;
    console.log(DBEditorState); // logs the same Object as above
    this.state = { ...this.props.blogPost, content: EditorState.createWithContent(
        convertFromRaw(DBEditorState)
    )};
}
 

コンポーネントをレンダリングすると、次のエラーが表示されます。

 convertFromRawToDraftState.js:38 Uncaught TypeError: Cannot convert undefined or null to object
 

どんな助けでも大歓迎です!

  ベストアンサー

MongoDB/MongooseはContentStateの生のコンテンツを気に入らなかったようです。データをDBに送信する前にStringに変換すると、そのトリックが行われました:

ContentStateをDBに保存する

     saveBlogPostToStore(blogPost) {
    const JSBlogPost = { ...blogPost, content: JSON.stringify(convertToRaw(blogPost.content.getCurrentContent()))};
    this.props.dispatch(blogActions.saveBlogPostToStore(JSBlogPost));
}
 

DBからのデータの使用

 constructor(props) {
    super(props);
    const DBEditorState = convertFromRaw(JSON.parse(this.props.blogPost.content));

    this.state = { ...this.props.blogPost, content: EditorState.createWithContent(
        DBEditorState
    )};
}
 

  同じタグがついた質問を見る

javascriptreactjsdraftjs