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

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设置的。我想等到mapStateToProps中从服务器接收到profile。之后，我想用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
};
}
};