Как использовать избыточное хранилище для правильного обновления EditorState в Draft.js - PullRequest
Новая
       6

Как использовать избыточное хранилище для правильного обновления EditorState в Draft.js

0 голосов
/ 29 ноября 2018

У меня возникли сложности с установкой условия, которое использует EditorState.createEmtpy() или EditorState.createWithContent().По сути, если извлеченные данные содержат сохраненную запись, я хочу отобразить этот контент.Если нет, то я хочу EditorState.createEmtpy()

Для начала вот мой фактический контейнер TextEditor: 

import React, { Component } from 'react';
import './styles/TextEditor.css';
import { Editor, EditorState, convertToRaw, convertFromRaw, ContentState} from 'draft-js';
import { connect } from 'react-redux';
import { addNewRecord, getRecord } from '../actions/recordActions.js';
import { bindActionCreators } from 'redux';

class TextEditor extends Component {
    constructor(props){
        super(props);
        this.state = {
            editorState: EditorState.createEmpty()
        }


            this.onChange = (editorState) => {
                const contentState = this.state.editorState.getCurrentContent();
                const editorStateJSONFormat = convertToRaw(contentState)
                this.props.addNewRecord(editorStateJSONFormat);
                this.setState({
                    editorState
                });
            }
        }


        componentDidMount = (props) => {
            this.props.getRecord()
        }

        componentWillReceiveProps = (nextProps, prevProps) => {
            let lastRecord;
            for (let i = nextProps.records.length; i > 0; i--){
                if (i === nextProps.records.length - 1){
                    lastRecord = nextProps.records[i].body
                }
            }
            const replaceRubyHashRocket = /=>/g
            const content = lastRecord.replace(replaceRubyHashRocket, ":")


            if (nextProps.records.length >= 1){
                this.setState({
                    editorState: EditorState.createWithContent(convertFromRaw(JSON.parse(content)))
                })
            } else{
                this.setState({
                    editorState: EditorState.createEmpty()
                })
            }
        }


    render(){
        return(
            <div id="document-container">
                <div >
                    <Editor 
                        editorState={this.state.editorState} 
                        onChange={this.onChange} 
                        placeholder="Type Below"
                        ref={this.setDomEditorRef}
                    />
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
  return ({
    records: state.allRecords.records
  });
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({
    getRecord,
    addNewRecord
  }, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(TextEditor)

Все работает нормально, но я совершенно заблудился относительно того, какой метод жизненного цикла компонента Iследует использовать.

В таком виде, я могу напечатать что-нибудь в редакторе, обновить, и тогда редактор отобразит правильное содержимое (последний элемент в массиве).Проблема в том, что, когда я иду, чтобы добавить больше контента в редакторе, я получаю сообщение об ошибке, что content не определено.Это похоже на то, что мой цикл получения последнего элемента теперь недействителен?

Для контекста, вот мой редуктор: 

export default function manageDocuments(state = {loading: false,
}, action) {
    switch(action.type) {
        case 'PUSHING_RECORD':
            return {...state, loading: true}
        case "ADD_RECORD":
            return {...state, loading: false, records: action.payload}

        case "LOADING_RECORD":
            return {...state, loading: true}
        case "GET_RECORD":
            return {loading: false, ...state, records: action.payload}

        default:
            return {...state}
    }
};

Вот мое действие для запроса POST / GET от моего Rails API. 

import fetch from 'isomorphic-fetch';

export function addNewRecord(editorStateJSONFormat) {
    const request = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json; charset=utf-8', "Accepts": "application/json"
        },
        body: JSON.stringify({body: editorStateJSONFormat})
    }

    return (dispatch) => {
        dispatch({type: 'PUSHING_RECORD'});
        return fetch('http://localhost:3001/api/v1/documents', request)
            .then(response => response.json())
            .then(records => {
                dispatch({type: 'ADD_RECORD', payload: records})
        });
    }
}

export function getRecord() {
    return (dispatch) => {
        dispatch({type: 'LOADING_RECORD'});

        return fetch('http://localhost:3001/api/v1/documents', {method: 'GET'})
            .then(response => response.json())
            .then(records => dispatch({type: 'GET_RECORD', payload: records}));
        }
}

Я объединил редукторы здесь (в этом нет особой необходимости): 

import { combineReducers } from 'redux';
import docsReducer from './docsReducer';

    export default combineReducers({
      allRecords: docsReducer
    })

Я довольно потерян здесь.Как мне этого добиться?

1 Ответ

0 голосов
/ 29 ноября 2018

Для тех, кто интересуется, это, кажется, делает трюк: 

componentWillReceiveProps = (nextProps) => {
    if (nextProps.records.length >= 1){

        let lastRecord;
        for (let i = nextProps.records.length; i > 0; i--){
            if (i === nextProps.records.length - 1){
                lastRecord = nextProps.records[i].body
            }
        }

        const replaceRubyHashRocket = /=>/g
        const content = lastRecord.replace(replaceRubyHashRocket, ":")

        this.setState({
            editorState: EditorState.createWithContent(convertFromRaw(JSON.parse(content)))
        })
    }
}

Помещение логики в условное выражение и удаление: 

this.setState({
     editorState: EditorState.createEmpty()
})

позволило создать пустой документ, еслиБД пуста или всегда возвращает последний элемент в массиве, если БД не пуста.

Работает нормально!

Я знаю, componentWillReceiveProps устарела, но это был единственный способ, которым ямог бы выполнить то, что мне нужно.

...