我有一个组件

import React, { Component } from 'react'
import { EditorState, convertToRaw } from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftToHtml from 'draftjs-to-html'

import toolbarOptions from './JpuriTextEditorOptions'

export default class TextEditor extends Component {
  state = {
    editorState: this.props.editorState
  }

  componentWillReceiveProps = nextProps => {
    console.warn('componentWillReceiveProps')
    console.log('nextProps.editorState', nextProps.editorState)
    console.log('this.props.editorState', this.props.editorState)

    this.setState({editorState: nextProps.editorState})
  }

  onEditorStateChange = editorState => this.setState({editorState})

  onBlur = () => this.props.onBlur({key: this.props.myKey, value: draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))})

  render () {
    return (
      <Editor
        wrapperClassName={this.props.wrapperClassName}
        editorClassName={this.props.editorClassName}
        toolbarClassName={`toolbarAbsoluteTop ${this.props.toolbarClassName}`}

        wrapperStyle={this.props.wrapperStyle}
        editorStyle={this.props.editorStyle}
        toolbarStyle={this.props.toolbarStyle}

        editorState={this.state.editorState}
        onEditorStateChange={this.onEditorStateChange}
        onChange={this.props.onChange}

        toolbarOnFocus
        toolbar={toolbarOptions}

        onFocus={this.props.onFocus}
        onBlur={this.onBlur}
        onTab={this.props.onTab}
      />
    )
  }
}

我传递给它一个响应式 Prop ，this.props.editorState 然后我将它设置在内部状态中以处理那里的变化。只有 onBlur 我将更改保存到 mongo 数据库。

现在有一个问题。 每当我单击编辑器时，我都会多次看到 componentWillReceiveProps 日志。它发生在每次更改时，因此我无法正确使用我的编辑器组件。因为它的光标会随着每次点击和更改而重置为第一个字母。

我正在使用这个 draftjs 库 https://github.com/jpuri/react-draft-wysiwyg

编辑

问题的更多细节。 在构造函数或 componentDidMount 中将状态设置为 this.props.editorState 正在解决初始状态的问题。 但是只剩下一个问题了。 在另一个组件中，我具有直接与数据库一起使用的撤消重做功能。现在，如果我输入一些文本。模糊它，我的更改已保存到数据库中，由于内部文本，我可以看到文本。但是，如果我单击撤消按钮，文本将从数据库中撤消，但是由于内部状态，它在编辑器中仍然可见。所以我必须刷新才能看到我的操作被撤消。 使用 componentWillReceiveProps 可以解决此问题，但是由于某种原因，即使 props 没有更改，每次状态更改时都会调用 componentWillReceiveProps。从而带来上述问题。

最佳答案

如果您正在使用此组件的受控模式，那么您应该在内部设置状态，而不是通过 Prop 从外部设置它。
例如，如果您在收到的每个新 Prop 上设置状态，则没有理由使用内部状态。
根据他们的DOCS看起来你正在遵循他们的受控 EditorState 示例，除了你在每个新 Prop 上覆盖你的状态。
我认为如果您只是从 componentWillReceiveProps 中删除此行为 即设置状态:this.setState({editorState: nextProps.editorState})
它应该像预期的那样工作。

顺便说一句，这是他们的例子:

import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';


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

  onEditorStateChange: Function = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    const { editorState } = this.state;
    return (
      <Editor
        editorState={editorState}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={this.onEditorStateChange}
      />
    )
  }
}

编辑
根据您的评论，状态初始化通常在 constructor 中进行。
但是当你想异步初始化状态时，你不能也不应该在构造函数中(也不在 componentWillMount 中)因为到时候异步操作将完成 render方法将已经被调用。
最好的地方是 componentDidMount 或 eventHandlers，所以在你的情况下 onBlur eventHandler:
import React, { Component } from 'react'; 从 'draft-js' 导入 { EditorState }； import { Editor } from 'react-draft-wysiwyg';

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

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  onBlur = (event) => {
    // do async stuff here and update state
  };

  render() {
    const { editorState } = this.state;
    return (
      <Editor
        editorState={editorState}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={this.onEditorStateChange}
        onBlur={this.onBlur}
      />
    )
  }
}

关于javascript - React Meteor， react Prop 和内部状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46056907/