DraftJS Uncaught TypeError: Невозможно прочитать блоки «свойств» undefined

Question

Я пытаюсь прочитать данные из базы данных, а затем визуализировать DOM через реакцию. Для ввода я использовал draft.js и запускал convertToRaw на нем перед сохранением в db. Однако, когда я запускаю convertFromRaw и визуализацию, я получаю эту ошибку в консоли: «Uncaught TypeError: Невозможно прочитать блоки« свойств неопределенного ». Это мой первый раз с использованием 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 в сыром виде, а затем из сырого объекта обратно в EditorState.

Возможно, для преобразования его в исходное состояние может потребоваться строка. Тогда вам может понадобиться проанализировать его, когда вы попытаетесь использовать его в своем блоге.

/** 
* @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'); 
}; 

Im также получать 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 }); 
    } 
    }