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

Props in Initial State is anti-pattern，将道具置于状态，您可以使用：

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

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

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

2 个答案: