为什么获取到的ref是未定义呢

Question

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

我的ref={(morewrapl) => this.morewrapl = morewrapl}已经定义了为什么在componentDidMount方法里面调用确实未定义呢。

Answer 1

你可以改成类似这样的：

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)} />

    }
}