问React:将formData道具合并到组件的状态(Redux)
EN

Stack Overflow用户

提问于 2019-01-10 10:31:01

回答 2查看 734关注 0票数 0

在“编辑器”组件中，我监视表单输入更改并将其保存到状态。

当表单提交时，状态的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))

javascript

reactjs

redux

单节点MySQL

低成本高体验，解决您的基础业务数据需求

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-01-10 10: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
            }           
        }));
    }
}

票数 0

Stack Overflow用户

发布于 2019-01-10 10: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});
  }
}