0

我正在使用 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 请求，接收当前用户的 profile。

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

我对 React 和生命周期方法非常陌生，非常感谢任何关于我做错了什么以及为什么 componentWillReceiveProps 被弃用的反馈。

提前致谢

4

2 回答 2

0

我看不到你在这个应用程序中使用 redux 的地方。Redux 商店应该是一个单一的事实来源，你不应该使用本地状态来管理你的帐户。

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

我建议开始：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);
        })
    }
  }
于 2018-07-11T22:06:15.033 回答
0

在对生命周期方法进行了更多阅读之后，我想出了这个解决方案：

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

于 2018-07-11T19:07:27.293 回答