DraftJS Uncaught TypeError：无法读取未定义的属性“块”

Question

我正在尝试从数据库中读取数据，然后通过 react 渲染到 DOM。对于输入，我使用了 draft.js 并在保存到数据库之前对其运行 convertToRaw。但是，当我运行 convertFromRaw 并渲染时，我在控制台中收到此错误：“未捕获的类型错误：无法读取未定义的属性‘块’”。这是我第一次使用 draft.js，所以我不确定我做错了什么。有人可以帮忙吗？太感谢了！

//App.js


import React, {
  Component
}
from 'react';
import Blogs from './blogs';
import {
  Editor, EditorState, convertToRaw
}
from 'draft-js'
  // include horizon client
const Horizon = require('@horizon/client');
const horizon = Horizon({
  secure: false
});
// init blogs collection in rethinkdb
const blogger = horizon('blogs')

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: false,
      author: false,
      editorState: EditorState.createEmpty()
    }
  }

  // watch form values for change
  handleChangeTitle(event) {
    this.setState({
      title: event.target.value
    });
  }
  handleChangeAuthor(event) {
    this.setState({
      author: event.target.value
    });
  }
  handleChangeBody(editorState) {
    this.setState({
      editorState
    });
  }

  writeBlog() {
    // check for empty string and return error to user
    if (this.state.title === false || this.state.author === false || this.state.body === false) {
      alert('Invalid Submission: One or more fields are empty');
      return;
    }
    let blog = {
      title: this.state.title,
      author: this.state.author,
      editorState: convertToRaw(this.state.editorState.getCurrentContent())
    };
    // store the inputs in the database
    blogger.store(blog);
  }

  render() {
    return ( < form >
      < div className = "center" >
      < Blogs blogger = {
        blogger
      }
      />
                    <div className="writer">
                    <div className="basic-inputs">
                        <div className="input-unit">
                            <label>Title</label >
      < input onChange = {
        this.handleChangeTitle.bind(this)
      } > < /input>
                        </div >
      < div className = "input-unit" >
      < label > Author < /label>
                            <input onChange={this.handleChangeAuthor.bind(this)}></input >
      < /div>
                    </div >
      < label > Blog < /label>
                    <Editor onChange={this.handleChangeBody.bind(this)} editorState={this.state.editorState} / >
      < button onClick = {
        this.writeBlog.bind(this)
      } > Post < /button>
                    </div >
      < /div>
            </form >
    );
  }
}

export
default App;

import React, { Component } from 'react';
import {convertFromRaw} from 'draft-js'

export default class Blog extends Component {
    constructor(props) {
        super(props)
        this.props = props;

    }

    render() {
        return (
            <div className="blog-container">
            <h2 className="title">{this.props.blg.title}</h2>
            <h4 className="author">{this.props.blg.author}</h4>
            <p className="body">{convertFromRaw(this.props.blg.body)}</p>
            </div>
        );
    }
}

Answer 1

我一直在使用这些函数将 ContentState 转换为 raw，然后从 raw 对象转换回 EditorState。

您可能需要在将 editorState 转换为 raw 时对其进行字符串化。 然后，当您尝试在博客组件中使用它时，可能需要对其进行解析。

/**
 * @param { EditorState } editorState
 * @returns { object }
 */
export const toRaw = editorState => {
  return convertToRaw(editorState.getCurrentContent());
};

/**
 * @param { EditorState } editorState
 * @param { object } raw
 * @returns { EditorState }
 */
export const fromRaw = (editorState, raw) => {
  return EditorState.push(editorState, convertFromRaw(raw), 'update-state');
};

我也像这样从 localStorage 获取 EditorState：

  componentWillMount() {
    if (!window.localStorage) {
      return;
    }
    const _editorState = localStorage.getItem('editorState');
    if (_editorState) {
      const parsedEditorState = JSON.parse(_editorState);
      const editorState = EditorState.push(
        this.state.editorState,
        convertFromRaw(parsedEditorState),
        'update-state'
      );
      this.setState({ editorState });
    }
  }