DraftJS遺漏的類型錯誤：無法讀取的不確定

屬性「塊」我試圖讀取數據庫中的數據，然後呈現到DOM通過反應。對於輸入，我使用draft.js並在保存到數據庫之前對其運行convertToRaw。但是，當我運行convertFromRaw和渲染，我在控制檯中得到這個錯誤：「未捕獲的TypeError：無法讀取未定義的屬性」塊「。這是我第一次使用draft.js，所以我不確定我做錯了什麼。有人可以幫忙嗎？非常感謝！DraftJS遺漏的類型錯誤：無法讀取的不確定

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

來源

2016-09-30 ohenecoker

什麼呢'this.props.blg.body'回報？ – finalfreq

它返回draftjs輸入的狀態從數據庫 – ohenecoker

如果你'convertFromRaw（JSON.parse（this.props.blg.body））' – finalfreq

我一直在使用這些功能的ContentState轉換成原始的，然後從原始對象返回到EditorState。

您可能需要將其轉換爲原料時，字符串化的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'); 
};

林也從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 }); 
    } 
    }

來源

2016-10-12 23:10:33

DraftJS遺漏的類型錯誤：無法讀取的不確定

回答

相關問題