Javascript 使用componentWillReceiveProps多次将状态从父级传递给子级

我正在将状态从父组件传递到子组件，一切正常，但我认为父组件的道具没有定义，因为我正在进行

async

设置状态需要两秒钟。当我设置TimeOut

this.props.时，在子组件的
componentDidMount
中检查
两秒钟，它工作正常，我得到了数据

这里的问题我觉得使用
setTimeOut
不合适，所以我决定使用
componentWillReceiveProps
它可以工作，但是当子组件中的任何事件渲染时，
componentWillReceiveProps
将重新渲染，我只需要渲染一次

我把代码改得很简单

父组件

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      check: ''
    }
  }
  componentWillMount() {
    this.call();
  }
  call = () => {
    //I'm making async here might take two sec
      this.setState({ check: 'received' })

  }

  render() {
    return (
      <div>
        <span>Parent Component</span>
        <Child check={this.state.check}  />
      </div>
    )
  }
}

class Child extends Component {

  componentDidMount() { // this works fine and render only one time, this what I really wanna do but I don't like to use setTimeOut
    setTimeout(() => {
      console.log(this.props.check); 
    }, 2000)
  }
  componentWillReceiveProps(nextProps){ // this works but when any action happening this will re-render 
    if (nextProps.check !== this.props.check){
      console.log(this.props.check)
    }
  }
  render() {
    return (
      <div>
        <span>Child Component</span>
      </div>
    )
  }
}

export default Child;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
检查：“”
}
}
组件willmount（）{
这个。call（）；
}
呼叫=（）=>{
//我在这里做异步可能需要两秒钟
this.setState（{check:'received'}）
}
render（）{
返回(
父组件
)
}
}

子组件

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      check: ''
    }
  }
  componentWillMount() {
    this.call();
  }
  call = () => {
    //I'm making async here might take two sec
      this.setState({ check: 'received' })

  }

  render() {
    return (
      <div>
        <span>Parent Component</span>
        <Child check={this.state.check}  />
      </div>
    )
  }
}

class Child extends Component {

  componentDidMount() { // this works fine and render only one time, this what I really wanna do but I don't like to use setTimeOut
    setTimeout(() => {
      console.log(this.props.check); 
    }, 2000)
  }
  componentWillReceiveProps(nextProps){ // this works but when any action happening this will re-render 
    if (nextProps.check !== this.props.check){
      console.log(this.props.check)
    }
  }
  render() {
    return (
      <div>
        <span>Child Component</span>
      </div>
    )
  }
}

export default Child;

类子级扩展组件{
componentDidMount（）{//这很好，只渲染一次，这是我真正想做的，但我不喜欢使用setTimeOut
设置超时（（）=>{
console.log（this.props.check）；
}, 2000)
}
componentWillReceiveProps（nextProps）{//这可以工作，但当发生任何操作时，它将重新呈现
if（nextrops.check！==this.props.check）{
console.log（this.props.check）
}
}
render（）{
返回(
子组件
)
}
}
导出默认子对象；
如果应用程序的
状态。check
可能是
null
（因为它是异步设置的），您需要决定在这段时间内要渲染什么

可能是在
状态之前，您根本不想渲染
子对象。使用此应用程序中的渲染方法设置check
：

{this.state.check？（）：（加载…}
我的主代码中无法执行此操作我的原始代码我的代码看起来像
是否有其他方法可以执行此操作？当state.check仍然为空时，您实际希望执行什么操作？当它停止为null时，您希望发生什么？如果仍然为null，我不想发送它。我们可以这样做吗？就像这个孩子总是必须为check prop设置一些值一样，它可能为null、未定义或实际值。你能分享更多关于用户在任何时候应该看到什么的信息吗？我想我需要使用
shouldComponentUpdate
和
componentWillReceiveProps
请帮助这两个答案对我没有帮助