Reactjs-getDerivedStateFromProps()未使用setState或Editing更新数据

Question

我必须修改个人详细信息，我使用getDerivedStateFromProps()而不是componentWillReceiveProps()来接收道具。以及，编辑用户名、名称并设置状态以更新个人数据。它不应该更新。

我添加了以下代码。

构造函数

constructor(props){
super(props)
this.state = {
name : '',
username : '',
email : ''
}
this.props.getPersonal(userId)
}

如果我使用组件WillReceiveProps，工作正常

static componentWillReceiveProps(nextProps) {
if(this.state.username !== nextProps.personal.username){
this.setState({username: nextProps.personal.username})
}
}

如果我使用getDerivedStateFromProps

static getDerivedStateFromProps(props, state) {
if (props.personal.username !== state.username) {
return {
username: props.personal.username
};
}
return null;
}

更新状态

handleChange = e => {
const { name, value } = e.target;
this.setState({ [name] : value})
}

渲染方法

render(){
const { username, name } = this.state
return (
<div>
<div className="form-group  m-t-40">
<div className="col-xs-12">
<input className="form-control" type="text" name="username" placeholder="Email" value={username} onChange={this.handleChange} />
</div>
</div>
</div>
)
}

我试过ReactJs 13.1，我希望你能帮助我。

Answer 1

您可以在构造函数中执行此操作：

constructor(props){
super(props)
this.state = {
name : props.personal.name,
username : props.personal.username,
email : props.personal.email
}
}

或在componentDidMount中，以便在下一个装载上具有新的父数据

componentDidMount = () => {
this.setState({
name : this.props.personal.name,
username ....
})
}

并且不使用getDerivedStateFromProps((

Answer 2

我认为您必须将getDerivedStateFromProps与shouldComponentUpdate(nextOps，nextState(或componentDidUpdate(prevProps，prevState(一起使用。getDerivedStateFromProps用于在设置状态之前修改数据，我认为