Я пытаюсь вызвать функцию из метода render (). Но его метод высказывания не существует

Ниже приведен мой метод конструктора

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>;
  }

Но когда я вызываю метод getSlide изнутри метода render (), я получаю эту ошибку 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

Может кто-нибудь сказать мне, что я делаю не так?

0
hitesh 15 Мар 2018 в 13:38

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));
}
0
Telman Ahababov 15 Мар 2018 в 13:50