DraftJS Uncaught TypeError: не удается прочитать свойство "блоки" неопределенного

#javascript #reactjs #rethinkdb #draftjs

Вопрос:

Я пытаюсь считывать данные из базы данных, а затем отображать в DOM через react. Для ввода я использовал 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>
        );
    }
}

1. что this.props.blg.body возвращает?

2. Он возвращает состояние ввода draftjs как объект из базы данных

3. что произойдет, если вы сделаете convertFromRaw(JSON.parse(this.props.blg.body))

4. Хм, я получаю сообщение об ошибке в консоли; «Неперехваченная ошибка синтаксиса: неожиданный токен u в JSON в позиции 0»

Ответ №1:

Я использовал эти функции для преобразования contentState в 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');
};

Я также получаю EditorState из localStorage следующим образом:

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