Reactjs getDerivedStateFromProps不适用于我的应用程序。我如何替换组件WilleReceiveProps？

我正在使用Redux创建一个React应用程序，在我的帐户设置页面上，我有一个表单，我希望预先填充用户信息，然后让他们能够编辑字段并更新其配置文件。我的代码如下：

class UpdateProfile extends Component {
  constructor(props) {
    super(props);
    this.props.getCurrentProfile();
    this.state = {
      firstName: "",
      lastName: "",
      email: "",
      gender: "",
      bday: "",
      address1: "",
      address2: "",
      zipCode: "",
      phone: "",
      contactMethod: "",
      plan: "",
      apptReminders: true,
      updates: true,
      errors: {}
    };

    // Bind functions
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  // static getDerivedStateFromProps(nextProps) {
  //   if (nextProps.profile) {
  //     let personal = nextProps.profile.profile.personalInfo;
  //     let account = nextProps.profile.profile.accountInfo;
  //     return {
  //       firstName: personal.firstName,
  //       lastName: personal.lastName,
  //       email: personal.email,
  //       address1: personal.address1,
  //       address2: personal.address2,
  //       zipCode: personal.zipCode,
  //       phone: personal.phone,
  //       contactMethod: account.contactMethod,
  //       plan: account.plan,
  //       apptReminders: account.alerts.apptReminders,
  //       updates: account.alerts.updates
  //     };
  //   } else {
  //     return null;
  //   }
  // }

  componentWillReceiveProps(nextProps) {
    if (nextProps) {
      let personal = nextProps.profile.profile.personalInfo;
      let account = nextProps.profile.profile.accountInfo;
      this.setState({
        firstName: personal.firstName,
        lastName: personal.lastName,
        email: personal.email,
        address1: personal.address1,
        address2: personal.address2,
        zipCode: personal.zipCode,
        phone: personal.phone,
        contactMethod: account.contactMethod,
        plan: account.plan,
        apptReminders: account.alerts.apptReminders,
        updates: account.alerts.updates
      });
    }
  }

此.props.getCurrentProfile（）向mongoDB发送axios请求并接收当前用户的配置文件

问题是，如果使用getDerivedStateFromProps方法，文本字段是静态的，无法编辑。即使使用componentWillMount方法，如果我从浏览器刷新页面时说配置文件为空，我也会得到一个错误

我对React和lifecycle方法非常陌生，非常感谢任何关于我做得不正确以及componentWillReceiveProps被弃用原因的反馈

---

提前感谢

在详细阅读了生命周期方法之后，我提出了以下解决方案：

 // Get profile
  componentDidMount() {
    this.props.getCurrentProfile();
  }

  // Fill in form
  componentDidUpdate(prevProps) {
    if (
      this.props.profile.profile &&
      prevProps.profile.profile !== this.props.profile.profile
    ) {
      let personal = this.props.profile.profile.personalInfo;
      let account = this.props.profile.profile.accountInfo;
      this.setState({
        firstName: personal.firstName,
        lastName: personal.lastName,
        email: personal.email,
        address1: personal.address1,
        address2: personal.address2,
        zipCode: personal.zipCode,
        phone: personal.phone,
        contactMethod: account.contactMethod,
        plan: account.plan
      });
    }
  }

---

这会根据需要工作，尽管它会渲染两次。如果有人知道等待请求返回渲染的方法，我将不胜感激。仅供参考，我正在使用Redux

我看不出您在此应用程序中在何处使用Redux。Redux store应该是唯一的真实来源，您不应该使用本地状态来管理您的帐户

此外，redux并不适用于异步操作，axios是异步的，您需要使用thunk之类的中间件，以便您的操作可以返回函数而不仅仅是类型。然后，您可以从返回的异步调用中调用dispatch，该调用将更新存储

我建议开始： 然后前进到异步操作：

本教程在我开始学习时最有意义：

---

我在单独的模块中使用redux。getCurrentProfile（）调用发送axios请求的操作。我在动作模块中使用了thunk。上面显示的状态仅管理表单的状态，对存储区没有影响。在提交表单时，表单的状态被格式化为适合mongoose模式，并发送到MyDB

//Example of asyn call in redux with thunk      
function fetchPosts(subreddit){
      //Thunk middleware knows how to handle functions.
      //It passes the dispatch method as an argument to the function,
      //thus making it able to dispatch actions itself.

    return dispatch =>{
            dispatch(requestPosts(subreddit))        
        return axios.get(`https://www.reddit.com/r/${subreddit}.json`,{headers: { 'Content-Type': 'text/plain;charset=utf-8'}})
        .then( res =>{                 
            dispatch(receivePosts(subreddit,res.data))
        }).catch(error=>{
            console.log(error);
        })
    }
  }