Question

我已经使用convertToRaw将内容保存到数据库中，我正在尝试将其加载回draft.js编辑器以使用户能够重新编辑内容。

draft.js编辑器包含在基于react-modal的组件中，当用户单击对该内容进行“编辑”时会显示该组件。这很重要，因为模态（和编辑器）没有重新实例化，它们只是显示和隐藏。

只需使用以下命令在（ES6）类构造函数中启动编辑器：

this.state = {editorState: EditorState.createEmpty()}

当用户点击“编辑”时，我从数据库加载原始内容，然后我尝试使用以下多种变体将原始内容加载到编辑器中：

const contentState = convertFromRaw(rawContent)
const newEditorState = EditorState.push(this.state.editorState, contentState);
this.setState({editorState: newEditorState})

但是当newEditorState显然包含正确的内容时，this.setState({editorState: newEditorState})似乎对组件（或编辑器）的状态完全没有影响。

我是如何为编辑设置新状态的？谢谢！

更新在进一步调查中，显然只有this.setState({editorState: newEditorState})才会对编辑器组件失败。

我通过设置测试状态属性并成功更新它来测试它，而editorState保持不变。

为了完全测试，在我的构造函数中，我使用以下函数初始化了测试值：

this.state = { 
    editorState:EditorState.createWithContent(ContentState.createFromText('Hello')),
    testVal: 'Test Val 1'
}

然后我写了一些测试代码来说明setState如何为我的测试值工作，但不是为draft.js编辑器状态：

const newEditorState = EditorState.createWithContent(ContentState.createFromText('Goodbye'))
console.log('Before setState')
console.log('newEditorState: ' + newEditorState.getCurrentContent().getPlainText());
console.log('editorState: ' + this.state.editorState.getCurrentContent().getPlainText());
console.log('testVal: ' + this.state.testVal);

this.setState({editorState: newEditorState, testVal: 'Test Val 2'}, function(){
    console.log('After setState')
    console.log('editorState: ' + this.state.editorState.getCurrentContent().getPlainText());
    console.log('testVal: ' + this.state.testVal);
});

控制台输出如下：

Before setState
    newEditorState: Goodbye
    editorState: Hello
    testVal: Test Val 1
After setState
    editorState: Hello
    testVal: Test Val 2

我不明白为什么在testVal出现时没有更新draft.js editorState？

Answer 1

我在项目

中使用了以下内容

const blocks = convertFromRaw(props.rawBlocks);
editorState = EditorState.createWithContent(blocks, null);

Answer 2

好的，我发现了问题所在。

在尝试拨打setState()之后，我立即将焦点设置为编辑。

即。我在编辑器上调用focus()，在之前将focus()调用移动到我尝试setState，这一切都奏效了。显然，接受焦点会对editorState产生影响。

无法在draft.js中设置editorState（它看起来是不可变的但没有错误）

2 个答案: