Why is the obtained ref undefined?

import React  from "react"
import "./style.less"
import HomeList from "../../../components/List"
import HomeMore from "../../../components/LoadMore"
import { getListData } from "../../../fetch/home/home"

class List extends React.Component  {
  constructor(props,context){
    super(props,context);
    this.state = {
        data: [],
        page:0,
        isloading:false,
        hasmore:true
    }
  }
  render() {
    return(
      <div>
          {
          this.state.data.length>0 ?
            <div  >
              <div className="home-list-title"></div>
              <HomeList data={this.state.data}  />
              <HomeMore ref={(morewrapl) => this.morewrapl = morewrapl}  isloading={this.state.isloading}  hasmore={this.state.hasmore} loadmore={this.getfitpage.bind(this)} />
            </div>
            :""


          }
      </div>
    )
  }
 componentDidMount(){
   let turn
   console.log(this.morewrapl);
   function timeout(){

   }
   window.addEventListener("scroll", ()=>{
      if(turn){
        clearTimeout(turn)
      }
      turn=setTimeout(timeout,100)
 })
  this.getfitpage();
}
 getfitpage(){
   let page=this.state.page
   let city=this.props.cityName
   let datalist = getListData(city,page)
   this.setState({"isloading":true,"page":this.state.page+1})
   this.handledeale(datalist);
 }
 handledeale(datalist){
   datalist
   .then((res)=>{
       return res.json()
   })
   .then((json)=>{
     this.setState({
       data:this.state.data.concat(json.data),
       "isloading":false,
       "hasmore":json.hasMore
     })
   })

 }
}

export default  List

my ref= {(morewrapl) = > this.morewrapl = morewrapl} has defined why the call in the componentDidMount method is really not defined.

class extends React.Component{ constructor(props) { super(props); this.morewrapl = React.createRef(); } render() { <HomeMore ref={this.morewrapl} isloading={this.state.isloading} hasmore={this.state.hasmore} loadmore={this.getfitpage.bind(this)} /> } }