Question

我试图从render（）menthod中调用一个函数。但它的说法不存在

以下是我的构造函数方法

constructor(props) {
    super(props);

    this.state={tournaments:[
      {
        "img":"http://www.gstatic.com/webp/gallery/3.jpg",
        "tn":"8th Shuttlers Corporate Badminton Tournament 2018",
        "dt":"20 jan 2018",
        "sp":"599",
        "ven":"oyeplay sports private limited, HSR layout",
        "venlink":"www.yahoo.com",
        "tl":"http://localhost/oyetournament/8th-Shuttlers-Corporate-Badminton-Tournament-2018"
      },
      {
        "img":"http://www.gstatic.com/webp/gallery/4.jpg",
        "tn":"9th Shuttlers Corporate Badminton Tournament 2018",
        "dt":"20 feb 2018",
        "sp":"699",
        "ven":"oyeplay sports private limited, HSR layout",
        "venlink":"www.google.com",
        "tl":"http://localhost/oyetournament/8th-Shuttlers-Corporate-Badminton-Tournament-2019"
      }
    ]}
    this.getSlide=this.getSlide.bind(this);
  }

getSlide(tournament){
    return <div class="item active">
      <div className={cssstyles.hero}>
           <MediaQuery query="(min-device-width: 600px)">
              <h1 >{tournament.tn}</h1>
              <i class="fa fa-calendar legend" id="date" style={styles.date_icon}></i><span class="legend" style={styles.date}>{tournament.dt}</span>
              <div style={styles.div}><i id="addr" class="fa fa-map-marker legend" style={styles.addr_icon}></i><a class="legend"  href={tournament.venlink} style={styles.addr}>{tournament.ven}</a></div>
              <div>
                <span class="legend" style={styles.startfrom}>Starts from</span> <i style={styles.rupee_icon} class="fa legend">&#xf156;</i><span style={styles.rupee} class="legend">{tournament.sp}/-</span>
                <a href={tournament.tl} class="legend" style={styles.booknow}>Book Now</a>
              </div>
            </MediaQuery>

            <MediaQuery query="(max-device-width: 600px)">
              <h1>{tournament.tn}</h1>
              <div style={styles.div}><i class="fa fa-calendar legend" id="date" style={styles.date_icon}></i><span class="legend" style={styles.date}>{tournament.dt}</span></div>
              <div><a href={tournament.tl} class="legend" style={styles.booknowmobile}>Book Now</a></div>
            </MediaQuery>
      </div>
      <div className={cssstyles.overlay}></div>
      <a href="#"> <img  src={tournament.img} /></a>
    </div>;
  }

但是当我从render（）方法内部调用getSlide方法时，我收到此错误Uncaught ReferenceError：getSlide未定义

render() {
    var indicators=[];
    var images=[];
    this.state.tournaments.map(function(tournament,i){
      if(i==0){
        indicators.push(<li data-target="#carousel-example" data-slide-to="{i}" class="active"></li>);
        images.push(getSlide(tournament));
      }else

有人能告诉我我在做什么错吗？

Answer 1

getSlide函数不是全局函数，而是组件的一部分，因此您需要使用上下文前缀来调用它，例如this.getSlide()。

此外，由于您使用map函数创建了自己的上下文，因此调用this.getSlide()将无法正常工作，因此您需要知道您使用正确的getSlide进行调用上下文。有几种方法可以做到这一点：

例如：

//Option 1, with arrow function (if you use ES6)
render() {
    this.state.tournaments.map((tournament,i) => {
      this.getSlide(tournament)
    });
}

//Option 2, with saving context (if you use ES5)
render() {
    var self = this;
    this.state.tournaments.map(function(tournament,i){
      return self.getSlide(tournament)
    });
}

//Option 3, with binding context (if you use ES5)
render() {
    this.state.tournaments.map(function(tournament,i){
      return this.getSlide(tournament)
    }.bind(this));
}

无法在渲染中调用函数

1 个答案: