Javascript 反应子状态不'；t使用父亲的道具更新（以及分支中的更深层）

问题如下： 我有三个部分：祖父、父亲和孩子（字面意思是D）。 祖父通过道具把他的状态传递给父亲（父亲用道具来设定他的状态）。 然后父亲把道具递给孩子，孩子也用道具设定状态。 当我展示这个道具时，一切都很好，但是当我展示 然后我看到父亲和孩子没有任何变化。 我听说有类似componentWillReceiveProps（）的东西，但它已经被弃用了

工作示例：

及守则：

祖父.js

import React from "react";
import Father from "./Father";

class GrandFather extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedCounter: 1
    };
  }

  onClick = e => {
    this.setState(prevState => ({
      clickedCounter: prevState.clickedCounter + 1
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.onClick}>Press me</button> <br />
        Here is Grandfather -> state value={this.state.clickedCounter}
        <Father clickedCounter={this.state.clickedCounter} />
      </div>
    );
  }
}
export default GrandFather;

从“React”导入React；
从“/Father”导入父亲；
类。组件{
建造师（道具）{
超级（道具）；
此.state={
点击计数器：1
};
}
onClick=e=>{
this.setState（prevState=>({
clickedCounter:prevState.clickedCounter+1
}));
};
render（）{
返回(
按我

下面是祖父->状态值={this.state.clickedCounter}
);
}
}
出口违约金；

父亲.js

import React from "react";
import Child from "./Child";

class Father extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedCounter: this.props.clickedCounter
    };
  }
  render() {
    return (
      <div>
        Here is Father -> props value={this.props.clickedCounter} <br />
        Here is Father -> state value={this.state.clickedCounter}
        <Child clickedCounter={this.props.clickedCounter} />
      </div>
    );
  }
}
export default Father;

从“React”导入React；
从“/Child”导入子项；
类父类扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
clickedCounter:this.props.clickedCounter
};
}
render（）{
返回(
这里是父->道具值={this.props.clickedCounter}

下面是父->状态值={this.state.clickedCounter}
);
}
}
导出默认父亲；

Child.js

import React from "react";

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedCounter: this.props.clickedCounter
    };
  }
  render() {
    return (
      <div>
        Here is Child -> props value={this.props.clickedCounter} <br />
        Here is Child -> state value={this.state.clickedCounter}
      </div>
    );
  }
}

export default Child;

从“React”导入React；
子类扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
clickedCounter:this.props.clickedCounter
};
}
render（）{
返回(
这里是Child->props value={this.props.clickedCounter}

下面是Child->state value={this.state.clickedCounter}
);
}
}
导出默认子对象；

---

我还听说有类似克隆儿童的事情。。。如果可能的话，我想避免它。

当您从道具初始化状态时，react不会刷新状态，但它会刷新道具。您可以使用下面的代码使其工作，而不是componentWillReceiveProps

static getDerivedStateFromProps(nextProps) {    
    return {
      clickedCounter: nextProps.clickedCounter,
    }
}