反应：将formData道具合并到组件的状态（Redux）

Question

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

提交表单后，将状态的formData调度到商店，当组件重新加载时，我想将propData从道具（商店）合并到状态。

我试过先使用initialState来使用spread运算符，然后传播我的prop的formData，并且先传播我的prop然后设置initialState一样

我不是React + 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))

Answer 1

处于初始状态的道具是反模式 ，要将道具置于状态，可以使用：

componentDidMount(){
    this.setState(prevState => ({
        ...prevState,
        ...this.props.initialState
    }));
}

并在组件更新时更新state ，可以使用componentdidupdate ：

componentdidupdate(prevProps){
    if(prevProps.initialState !== this.props.initialState){
        this.setState(prevState => ({
            ...prevState,
            formData : {
                ...this.props.formData
            }           
        }));
    }
}

Answer 2

首先，我不明白您为什么要使用这种方法，因为这种方法不好。 但是根据您的要求，您可以做一件事。 您可以声明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});
  }
}

这可以解决您的问题，但是我强烈建议您使用其他方法。