Question

我必须修改个人详细信息，我使用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，希望您对我有帮助。

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（nextProps，nextState）或componentDidUpdate（prevProps，prevState）一起使用。我认为getDerivedStateFromProps用于在设置状态之前修改数据

Reactjs-getDerivedStateFromProps（）未使用setState或编辑数据更新数据

2 个答案: