Question

我有一个从网址获取的json文件然后我将此对象放入状态变量，然后当用户在搜索栏中输入城市名称时，我获取用户输入的内容并将其拼凑到我的对象的行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=Amsterdam&type=-&people=any&favorite=0&pid=&sw=52.293753%2C4.634942&ne=52.455562%2C5.162286&ids=17201%2C19640%2C13692%2C13691%2C12136%2C17938%2C15292%2C14886%2C14885%2C14884%2C14883%2C15730%2C15353%2C15351%2C15330%2C15080%2C17290%2C15454%2C15451%2C15379",
    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 =  result;
console.log(info);
this.setState({
  resultObject:info
})
  }.bind(this));
 }

  nextImg(){
if(this.state.imgNo < 2 && 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  && 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>    
  );

} }

通过json对象reactjs填充列表项

0 个答案: