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

Question

我对 Reactjs 比较陌生，在这里我遇到了一些难题。我在一个简单的应用程序中使用 Draftjs 作为所见即所得的编辑器。当从 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() 当我在网上阅读时不会等到 props 更新为从 API 传递的值，ComponentWilLReceiveProps() 在收到来自 API 的数据之前运行，我收到以下错误:

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

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

Answer 1

componentWillReceiveProps 接受一个给出下一个道具的参数，你应该使用它，因为在这个方法中 this.props 会给你 "previous" 道具。

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)});
    }
}

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

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

ReactJS receiving data from API passing it as props to DraftJS

javascript

reactjs

draftjs