Блог

у меня есть файл json, который я извлекаю из URL, затем я помещаю этот объект в переменную состояния, затем, когда пользователь вводит название города в строке поиска, я извлекаю то, что ввел пользователь, и добавляю это в строку location_city моего объекта, а затем соответствующим образом заполняю элемент карточки, но функция showResult по какой-то причине не работает, и я не могу понять это, и когда я нажимаю кнопку, она продолжает регистрировать в консоли выбранный объект

обновление: он начал волшебным образом работать без моих фактических действий, возможно, возникла проблема с задержкой или что-то в этом роде, но в любом случае у меня все еще есть тема, потому что я был бы рад, если бы кто-нибудь мог сказать мне, как я могу лучше реализовать функцию поиска и фактически иметь возможность заполнять более одного элемента списка, а также если бы кто-нибудь мог помочь мне улучшить навигацию по слайдеру, например, когда вы нажимаете далее на последнюю картинку, она переходит к первой и наоборот

 import React from 'react';
import Card from './Card.js';

export default class Slider extends React.Component {

 constructor() {
   super()
    this.state = {
      imgArray: [ "/img/work1.jpg", "/img/work2.jpg", "/img/work3.jpg"],
      imgNo: 0,
      price: null,
      location: null,
  image: null,
  name: null,
  score: null,
  url: "https://www.deskbookers.com/nl-nl/sajax.json?q=Amsterdamamp;type=-amp;people=anyamp;favorite=0amp;pid=amp;sw=52.293753,4.634942amp;ne=52.455562,5.162286amp;ids=17201,19640,13692,13691,12136,17938,15292,14886,14885,14884,14883,15730,15353,15351,15330,15080,17290,15454,15451,15379",
    current: "/img/work1.jpg",
  search: null,
  resultObject: null,
  headlines: ["Pink Floyd Office", "Led Zeppelin Mania", "Central Perk Friends"],
  headline : "Pink Floyd Office"
};
 }

  componentDidMount(){
  this.serverRequest = $.get(this.state.url, function(result){
var info =  resu<
console.log(info);
this.setState({
  resultObject:info
})
  }.bind(this));
 }

  nextImg(){
if(this.state.imgNo < 2 amp;amp; this.state.imgNo >=0 ){
    this.setState({
    imgNo :   this.state.imgNo ,
    current: this.state.imgArray[this.state.imgNo],
  headline: this.state.headlines[this.state.imgNo]
  })
    console.log(this.state.imgNo);
  }
 }

  prevImg(){
if(this.state.imgNo >= 1  amp;amp; this.state.imgNo < 3 ){
    this.setState({
    imgNo : --this.state.imgNo,
    current: this.state.imgArray[this.state.imgNo],
  headline: this.state.headlines[this.state.imgNo]
  })
    console.log(this.state.imgNo);
  }
  }

  searchQuery(){
this.setState({
  search: this.refs.searchValue.value
})

  }

  showResult(){
var i;
for(i = 0; i<this.state.resultObject.rows.length; i  ){
    if(this.state.search == this.state.resultObject.rows[i].location_city){
      this.setState({
        price: this.state.resultObject.rows[i].day_price,
        location: this.state.resultObject.rows[i].location_city,
        image: this.state.resultObject.rows[i].image_urls2[0],
        name: this.state.resultObject.rows[i].location_name,
        score: this.state.resultObject.rows[i].location_rating
      })
    }
}

  }

 render(){

return(
  <div>
    <div class="slider ">
        <div class="img-container">
            <img src={this.state.current} class="main-img" />
            <div class="headline"><span>{this.state.headline}</span></div>
        </div>
        <img src="/img/slider-left.png" class="slider-arrow" onClick={this.prevImg.bind(this)} />
        <img src="/img/slider-right.png" class="slider-arrow slider-right" onClick={this.nextImg.bind(this)} />
      <div class="search-container">
        <input onChange={this.searchQuery.bind(this)} type="text" ref="searchValue" name="search"  placeholder="City name..." class="search-bar" />
        <button onClick={this.showResult.bind(this)} class="search-button">Sit me!</button>
      </div>
    </div>
    <ul class="card-list">
      <Card price={this.state.price} location={this.state.location} image={this.state.image}
            score={this.state.score} name={this.state.name}>
      </Card>
    </ul>
  </div>    
  );
  

}
}