reactjs - 生产类型错误上的 Draftjs：无法分配给“编辑器”上的属性“当前”：不是对象

Question

在开发模式下它工作得很好，但在生产中它会出错并且在控制台中写道：TypeError：无法分配给“编辑器”上的属性“当前”：不是一个对象任何想法，我花了将近 2 天时间让它工作，但是......？这是我的代码（短）

import { EditorState } from 'draft-js';
import TextEditor from '../../components/TextEditor'

const AddNew = () => {
const [editorState, ] = useState(() => EditorState.createEmpty())
return(<TextEditor editorState={editorState}/>)

}

这是 TextEditor 组件：

import React from 'react';
import {Editor, RichUtils,getDefaultKeyBinding,convertToRaw } from 'draft-js';
class TextEditor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {editorState: this?.props?.editorState || {}};

        this.focus = () => this.refs.editor.focus();
        this.saveContent = (content) => {
            setTimeout(() => {window.localStorage.setItem('additional_info', JSON.stringify(convertToRaw(content)));},1000)
        }
        this.onChange = (editorState) => {
            const contentState = editorState.getCurrentContent();
            this.saveContent(contentState);
            console.log('content state', convertToRaw(contentState));
            this.setState({editorState});
        };

        this.handleKeyCommand = this._handleKeyCommand.bind(this);
        this.mapKeyToEditorCommand = this._mapKeyToEditorCommand.bind(this);
        this.toggleBlockType = this._toggleBlockType.bind(this);
        // this.toggleInlineStyle = this._toggleInlineStyle.bind(this);
    }

    _handleKeyCommand(command, editorState) {
        const newState = RichUtils.handleKeyCommand(editorState, command);
        if (newState) {
            this.onChange(newState);
            return true;
        }
        return false;
    }

    _mapKeyToEditorCommand(e) {
        if (e.keyCode === 9 /* TAB */) {
            const newEditorState = RichUtils.onTab(
                e,
                this.state.editorState,
                4, /* maxDepth */
            );
            if (newEditorState !== this.state.editorState) {
                this.onChange(newEditorState);
            }
            return;
        }
        return getDefaultKeyBinding(e);
    }

    _toggleBlockType(blockType) {

        this.onChange(
            RichUtils.toggleBlockType(
                this.state.editorState,
                blockType
            )
        );
    }

    handlePastedText(text,html){
        // if they try to paste something they shouldn't let's handle it
        if (text.indexOf('text that should not be pasted') != -1) {
    
          // we'll add a message for the offending user to the editor state
          const newContent = Modifier.insertText(
            setEditorState(editorState.getCurrentContent()),
            setEditorState(editorState.getSelection()),
            'nice try, chump!'
          );
    
          // update our state with the new editor content
          this.onChange(EditorState.push(
            this.state.editorState,
            newContent,
            'insert-characters'
          ));
          return true;
        } else {
          return false;
        }
      }
    render() {
        const {editorState} = this.state;
        // If the user changes block type before entering any text, we can
        // either style the placeholder or hide it. Let's just hide it now.
        let className = 'RichEditor-editor';
        var contentState = editorState?.getCurrentContent();
        if (!contentState.hasText()) {
            if (contentState.getBlockMap().first().getType() !== 'paragraph') {
                className += ' RichEditor-hidePlaceholder';
            }
        }

        return (
            <div className="RichEditor-root">
                <BlockStyleControls
                    editorState={editorState}
                    onToggle={this.toggleBlockType}
                />
                {/*<InlineStyleControls*/}
                {/*    editorState={editorState}*/}
                {/*    onToggle={this.toggleInlineStyle}*/}
                {/*/>*/}
                <div className={className} onClick={this.focus}>
                    <Editor
                        blockStyleFn={getBlockStyle}
                        customStyleMap={styleMap}
                        editorState={editorState}
                        handleKeyCommand={this.handleKeyCommand}
                        keyBindingFn={this.mapKeyToEditorCommand}
                        onChange={this.onChange}
                        placeholder="Tell a story..."
                        ref="editor"
                        spellCheck={false}
                        handlePastedText={this.handlePastedText}
                        stripPastedStyles={true}
                    />
                </div>
            </div>
        );
    }
}

// Custom overrides for "code" style.
const styleMap = {
    CODE: {
        backgroundColor: 'rgba(0, 0, 0, 0.05)',
        fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
        fontSize: 16,
        padding: 2,
    },
};

function getBlockStyle(block) {
    switch (block.getType()) {
        case 'blockquote': return 'RichEditor-blockquote';
        default: return null;
    }
}

class StyleButton extends React.Component {
    constructor() {
        super();
        this.onToggle = (e) => {
            e.preventDefault();
            this.props.onToggle(this.props.style);
        };
    }

    render() {
        let className = 'RichEditor-styleButton';
        if (this.props.active) {
            className += ' RichEditor-activeButton';
        }

        return (
            <span className={className} onMouseDown={this.onToggle}>
              {this.props.label}
            </span>
        );
    }
}

const BLOCK_TYPES = [

    {label: 'Title', style: 'header-two'},
    {label: 'Text', style: 'paragraph'},
    {label: 'List', style: 'unordered-list-item'},

];

const BlockStyleControls = (props) => {
    const {editorState} = props;
    const selection = editorState.getSelection();
    const blockType = editorState
        .getCurrentContent()
        .getBlockForKey(selection.getStartKey())
        .getType();

    return (
        <div className="RichEditor-controls">
            {BLOCK_TYPES.map((type) =>
                <StyleButton
                    key={type.label}
                    active={type.style === blockType}
                    label={type.label}
                    onToggle={props.onToggle}
                    style={type.style}
                />
            )}
        </div>
    );
};



export default TextEditor;

会很高兴得到任何回应

标签： reactjsdraftjs