React:将formData道具合并到组件的状态(Redux)
React:将formData道具合并到组件的状态(Redux)
提问于 2019-01-10 18:31:01
在“编辑器”组件中，我监视表单输入更改并将其保存到状态。
当表单提交时，状态的formData被分派到存储区，当组件重新加载时，我想将formData从道具(存储)合并到状态。
我尝试使用先订购initialState的扩展操作符，然后传播我的道具的formData，以及先传播我的道具，然后设置initialState
我是新来的反应+ Redux，我只是不知道我做错了什么。
-提前谢谢！-本杰明
const initialState = {
articles: [],
formData: {
articleId: null,
title: '',
body: '',
status: editorTypes.STATUS_DRAFT
},
editMode: false,
}
const TITLE = editorTypes.TITLE_DEFAULT
const TYPE = editorTypes.TYPE_ARTICLE
class Editor extends React.Component {
constructor(props) {
super(props)
const { title, body, status } = this.props.formData
this.state = {
title: TITLE,
formData: {
title,
body,
status,
TYPE
},
...this.props.initialState
}
}编辑添加了mapStateToProps
const mapStateToProps = state => {
const { list, refreshList, editMode, formData } = state.dashboard.articles
return {
list,
refreshList,
editMode,
formData
}
}
export default connect(mapStateToProps)(EditorWrapper(Editor))回答 2
Stack Overflow用户
回答已采纳
发布于 2019-01-10 18:45:27
初始状态下的道具是反模式的，要将道具放入状态，可以使用：
componentDidMount(){
this.setState(prevState => ({
...prevState,
...this.props.initialState
}));
}要在组件更新时更新state，可以使用组分如下：
componentdidupdate(prevProps){
if(prevProps.initialState !== this.props.initialState){
this.setState(prevState => ({
...prevState,
formData : {
...this.props.formData
}
}));
}
}Stack Overflow用户
发布于 2019-01-10 18:50:26
首先，我不明白您为什么要这样做，因为这种方法不好。但至于你的要求，你可以做一件事。您可以声明componentDidUpdate，在cDU中可以检查，如果本地状态窗体和redux表单不同，则可以对新数据进行setState。示例：
componentDidUpdate(prevProps, prevState) {
// now you can check your props and state
if(prevState.formData.articleId === this.props.formData.articleId) {
// here i only compared your articleId, You can check others yourself or use
// Lodash to check your object equity.
// for example, with loash console.log(_.isEqual(prevState.formData,
// this.props.formData));
this.setState({ formData: this.props.formData});
}
}这可以解决您的问题，但我强烈建议使用其他方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54134873
复制相关文章
相似问题
腾讯云开发者
