Question

我有一个名为EditProfile的组件，用户可以在其中更新其个人资料的信息。下面是组件的简化版本。

class EditProfile extends Component {
  state = {
    editable: false,

    //main form data goes below here
    username: "",
    fullname: "",
    country: "",
    gender: "",
    description: "",

  };
  setGender = e => {
    this.setState({ gender: e.target.value });
  };

  onInputChange = e => {
    this.setState({ errors: {} });
    this.setState({ [e.target.name]: e.target.value });
  };


  static getDerivedStateFromProps = (nextProps, prevState) => {
    if (nextProps.profile.username !== prevState.username) {
      return { username: nextProps.profile.username };
    }
  };
  render() {

    return (
      <div className="ProfileSignUp">
        <h2 className="ProfileSignUp__header">Personal Information</h2>
        <input
          type="text"
          className="ProfileSignUp__username"
          placeholder="Username"
          name="username"
          value={this.state.username}
          onChange={this.onInputChange}
        />
        {this.state.errors.username}
        <input
          type="text"
          className="ProfileSignUp__fullname"
          placeholder="Fullname"
          name="fullname"
          value={this.state.fullname}
          onChange={this.onInputChange}
        />
        {this.state.errors.fullname}
        <div className="ProfileSignUp__save-btn" onClick={this.saveProfile}>
          Save Profile
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  profile: state.profile
});

如您所见，状态值是从getDerivedStateFromProps设置的。我要等到profile中从服务器收到mapStateToProps。之后，我要更新该值处于profile的道具状态。完成后，我想切换到editable模式。该程序不应该关心道具，我可以自由更新状态值。但是使用当前方法，一旦从服务器接收到数据，就可以正确设置状态值，但是我无法更新它。谁能建议我正确的方式去做？

Answer 1

我想出了一种方法。您可以在getDerivedStateFromProps

中执行类似的操作

  static getDerivedStateFromProps = (nextProps, prevState) => {
    //After the data is fetched once from the server
    //editable is set to true and this function never runs
    //It just sets the value of state from props one time
    if (
      nextProps.profile &&
      nextProps.profile.loggedIn &&
      !prevState.editable
    ) {
      return {
        username: nextProps.profile.username,
        fullname: nextProps.profile.fullname,
        gender: nextProps.profile.gender,
        description: nextProps.profile.description,
        userImage: nextProps.profile.userImage,
        editable: true
      };
    }
  };

创建从服务器获取数据的可编辑组件的正确方法？

1 个答案: