Redux映射状态到Props后如何设置组件状态？

首先，你不用把profile存在组件自己的state里，Redux Forms提供了更合适的方式来处理表单初始化，尤其是异步获取数据的场景。你的问题核心是没利用好Redux Forms的内置方法，而是试图用组件state来中转，反而导致异步时机的问题。

下面是具体的解决步骤：

1. 配置Redux Forms允许重新初始化 #

在reduxForm的高阶组件配置里，加上enableReinitialize: true，这样当表单的初始值变化时，表单会自动更新：

export default reduxForm({
  form: 'createProfile', // 你的表单名称
  enableReinitialize: true // 关键配置，允许重新初始化
})(
  connect(mapStateToProps, actions)(CreateProfile)
);

2. 使用initialize方法异步填充表单 #

Redux Form会给组件注入initialize这个props方法，专门用来设置表单的初始值。你可以在componentDidUpdate里检测props.profile的变化，当数据就绪时调用它：

componentDidUpdate(prevProps) {
  // 当profile从无到有，或者发生变化时
  if (prevProps.profile !== this.props.profile && this.props.profile) {
    // 用获取到的profile初始化表单
    this.props.initialize(this.props.profile);
  }
}

3. 移除组件state里的profile #

既然用Redux Forms的初始化机制，组件state里的profile: {}就不需要了，直接删掉：

constructor(props) {
  super(props);
  this.state = {
    showSocialMedia: true
    // 移除profile字段
  };
}

为什么之前的方法行不通？ #

• 你之前尝试的componentWillReceiveProps已经被React废弃，官方推荐用componentDidUpdate替代。
• 异步获取数据是在componentDidMount之后才完成的，初始渲染时this.props.profile是undefined，所以直接在componentDidMount里调用setState拿不到值。
• Redux Forms的表单状态是存在Redux Store里的，不是组件自己的state，所以用组件state中转完全没必要，反而会导致数据不同步。

完整修改后的关键代码片段 #

import React, { Component } from "react";
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
import { Link } from "react-router-dom";
import classnames from "classnames";
import * as actions from "../../actions";

class CreateProfile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showSocialMedia: true
    };
  }

  componentDidMount() {
    this.props.getCurrentUserProfile();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.profile !== this.props.profile && this.props.profile) {
      this.props.initialize(this.props.profile);
    }
  }

  // 其他renderField、onSubmit等方法保持不变...

  render() {
    const { handleSubmit } = this.props;
    // 这里不需要再从props取profile存到state，直接用Redux Forms的初始化即可
    return (
      // 你的render内容保持不变...
    );
  }
}

// 确保mapStateToProps正确映射profile
const mapStateToProps = state => ({
  profile: state.profile.profile, // 根据你的store结构调整路径
  errors: state.errors,
  initialValues: state.profile.profile // 这里也可以设置初始值，配合enableReinitialize
});

export default reduxForm({
  form: "createProfile",
  enableReinitialize: true
})(connect(mapStateToProps, actions)(CreateProfile));

这样修改后，当getCurrentUserProfile异步完成，props.profile更新时，表单会自动用最新的profile数据填充所有字段，完全不需要组件state参与，数据也能和Redux Store保持同步。

内容的提问来源于stack exchange，提问作者Esteban Trevino