12

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 から Data を取得して 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

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

4

1 に答える 1

21

MongoDB/Mongoose は ContentState からの生のコンテンツが気に入らなかったようです。DBに送信する前にデータを文字列に変換すると、うまくいきました：

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
    )};
}
于 2016-09-18T13:22:31.113 に答える