reactjs - componentDidMountの前にReact refが呼び出されていない

Question

私は自分のプロジェクトでこの例に従おうとしていますが、機能させることができませんでしたhttps://react-slick.neostack.com/docs/example/as-nav-for 理由は次のとおりだと思います:

1. それらを同期するには、両方のオブジェクトへの参照が必要です
2. componentDidMount() で設定された状態と同期されると思われます
3. 状態が設定されている場合、参照は未定義です

componentDidMount() の前に ref コールバックを実行することが想定されていると思いましたが、そうではありません。

私のコードのビット:

 Component {
   state = {
      topNav: null,
      bottomNav: null
   }

  componentDidMount () {
       console.log("componentDidMount being called : slider1 : " + this._topSlider + " slider 2 : " + this._bottomSlider)
       this.setState({
          topNav: this._topSlider,
          bottomNav: this._bottomSlider
        });
   }

   render() {

     console.log("render being called")
     ...

     <Slider
         asNavFor={this.state.bottomNav}
         ref={(slider) => {
              this._topSlider = slider
              console.log("topslider ref being called" + this._topSlider )
          }}
      >
     ...
     </Slider>

     <Slider
        asNavFor={this.state.topNav}
        ref={(slider) => {
          this._bottomSlider = slider
          console.log("bottomslider ref being called"+this._bottomSlider)
        }}
        slidesToShow={3}
        swipeToSlide={true}
        focusOnSelect={true}
      >
    ...
    </Slider>
    ...
}

---

これらはログです：

類似の質問: componentDidMount が ref コールバックの前に呼び出されました