ReactJS从API接收数据，将其作为道具传递给DraftJS

Question

我对Reactjs比较陌生，我在这里遇到的困境很少。我在一个简单的应用程序中使用Draftjs作为WYSIWYG编辑器。当从API（通常情况下）接收数据然后通过道具将其传递给子组件时，我有更新EditorState的问题。我假设我需要在开头创建EditorState：

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

然后，当我从API接收道具时，我想用收到的道具更新EditorState。所以在我的头脑和理想的世界里，我会做这样的事情：

componentWillReceiveProps() {
   let processedHTML = DraftPasteProcessor.processHTML(this.props.text);
   let contentState = ContentState.createFromBlockArray(processedHTML);

   this.setState({editorState: EditorState.createWithContent(contentState)});
}

但事实似乎并非如此。当我在线阅读时，ComponentWillReceiveProps（）不会等到道具更新为从API传递的值，ComponentWilLReceiveProps（）在收到来自API的数据之前运行并且我收到以下错误：

任何对Reactjs有一点经验的人都可以就此提出建议吗？如何在从API接收信息时更新EditorSTate。也许值得注意的是，这就是我如何将数据从父级传递给组件。

<WysiwygEditor full={true} text={this.props.error.errorText}/>

Answer 1

componentWillReceiveProps接受下一个道具的参数，你应该使用它，因为这个方法中的this.props会给你＆＃34;之前的＆＃34;道具。

componentWillReceiveProps(nextProps) {
    if (this.props.text !== nextProps.text) {
       let processedHTML = DraftPasteProcessor.processHTML(nextProps.text);
       let contentState = ContentState.createFromBlockArray(processedHTML);
       this.setState({editorState: EditorState.createWithContent(contentState)});
    }
}

我还添加了一个条件，以确保您仅在文本更改时更新文本。