getDerivedStateFromProps不适用于我的应用程序.如何更换组件WillRecieveProps

Question

我正在用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
});
}
}

this.props.getCurrentProfile((向mongoDB发送axios请求并接收当前用户的配置文件。

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

我对React和生命周期方法非常陌生，如果有任何关于我做得不正确的地方的反馈，以及组件WillReceiveProps被弃用的原因，我将不胜感激。

提前感谢

Answer 1

在阅读了更多关于生命周期方法的内容后，我提出了这个解决方案：

// 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

Answer 2

我看不出您在这个应用程序中在哪里使用redux。Redux商店应该是唯一的真相来源，你不应该使用当地州来管理你的账户。

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

我建议您开始：https://redux.js.org/introduction然后前进到异步操作：https://redux.js.org/advanced/async-actions.

当我开始学习时，本教程对我来说最有意义：https://codepen.io/stowball/post/a-dummy-s-guide-to-redux-and-thunk-in-react

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