Reactjs - getDerivedStateFromProps() 未使用 setState 更新数据或编辑数据答案

【问题标题】：Reactjs - getDerivedStateFromProps() not updated the data using setState or Editing the dataReactjs - getDerivedStateFromProps() 未使用 setState 更新数据或编辑数据
【发布时间】：2020-12-23 16:16:43
【问题描述】：

我要修改个人资料，我用getDerivedStateFromProps()而不是componentWillReceiveProps()来接收道具。并且，编辑用户名、姓名，并设置状态以更新个人数据。它不应该被更新。

我已经添加了以下代码。

构造函数

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

如果我使用 componentWillReceiveProps，它工作正常

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，希望你能帮助我。

【问题讨论】：

标签： reactjs react-native react-redux

【解决方案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()

【讨论】：

【解决方案2】：

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

【讨论】：

getDerivedStateFromProps 用于在设置状态之前修改数据。是的，正确，之后如果我以前 setState 没有更新
这是因为 getDerivedStateFromProps 是在 render 之前调用的，所以你把 state 设置为和 props 不同，getDerivedStateFromProps 再放 props。