在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ 為什么獲取到的ref是未定義呢

為什么獲取到的ref是未定義呢

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}已經(jīng)定義了為什么在componentDidMount方法里面調(diào)用確實(shí)未定義呢。

回答
編輯回答
夢(mèng)一場(chǎng)

你可以改成類(lèi)似這樣的:

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

    }
}
2017年5月8日 20:19