Javascript 子组件在父组件中设置setstate时getDerivedStateFromProps出现问题

我有3个组件<代码>祖父母，

父母

和

孩子

。 如果

祖父母

中的数据更改，我将其作为道具传递给

父母

，这样我可以触发

父母

中的更改，并使用

getDerivedStateFromProps

将新数据设置为其状态

export class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userId : this.props.userId
    }
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.userId !== prevState.userId)
      return {
        userId : this.props.userId
      }
    return null
  }
  getDataFromChild(value){
    this.setState({
      userId: value
    })
  }
  render(){
    return (
        <Child onChange={(value) => this.getDataFromChild(value)} />
    )
  }
}

问题是，当父组件中的任何状态或道具发生更改时，会触发从道具中获取派生状态，因为

nextprops.userId

不等于

prevState

（由

Child

设置的新状态），旧的userId（来自

祖父母

）被设置为状态。 我该怎么办。

---

对不起，我的英语水平不好。

如果您希望在

祖父母

中的值更改时更改

父

中的状态，那么最快的方法是使用

组件更新

：

export class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userId : this.props.userId
    }
  }
  getDataFromChild(value){
    this.setState({
      userId: value
    })
  }
  componentDidUpdate(prevProps) {
    if(prevProps.userId !== this.props.userId) {
      this.setState({
        userId: this.props.userId,
      });
    }
  }
  render(){
    return (
        <Child onChange={(value) => this.getDataFromChild(value)} />
    )
  }
}

相关的：

---

一旦

子组件在
父组件中设置了状态，您不希望
祖父母的状态影响它吗？不，我不希望。我希望
Child
可以在
Parent
中设置状态，但由于
Parent
中的以下代码，状态设置为使用旧数据（来自Parent）。静态GetDerievedStateFromProps（nextProps，prevState）{if（nextProps.userId！==prevState.userId）返回{userId:this.props.userId}返回null}@Agney
export class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userId : this.props.userId
    }
  }
  getDataFromChild(value){
    this.setState({
      userId: value
    })
  }
  componentDidUpdate(prevProps) {
    if(prevProps.userId !== this.props.userId) {
      this.setState({
        userId: this.props.userId,
      });
    }
  }
  render(){
    return (
        <Child onChange={(value) => this.getDataFromChild(value)} />
    )
  }
}

getDataFromChild(value){
  this.setState({
    userId: value,
    setByChild: true,
  })
}
componentDidUpdate(prevProps) {
  if(!this.state.setByChild && prevProps.userId !== this.props.userId) {
    this.setState({
      userId: this.props.userId,
    });
  }
}