Возникли проблемы с axios при записи в поле поиска - PullRequest
Новая
       31

Возникли проблемы с axios при записи в поле поиска

0 голосов
/ 15 апреля 2019

Я пытаюсь получить результат поиска через axios, но он никогда не получает последнюю букву в окне поиска.

Я уже пытался указать задержку в axios, но он будет отправлять запросы после тайм-аута все вместеи до сих пор не получил последнюю букву! 

import React, { Component } from "react";
import Searchdrawer from "./Searchdrawer";
import { Link } from "react-router-dom";
import { DebounceInput } from "react-debounce-input";

export default class Homepage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isim: ""
    };

    // this.change=this.change.bind(this);
  }

  change = gelen => {
    this.setState({ [gelen.target.name]: gelen.target.value });
  };

  render() {
    return (
      <div className="homepage">
        <div className="container">
          <div className="row searchKit">
            <div className="col-md-12" style={{ paddingBottom: 80 }}>
              <center>
                <h2>Promosyon.com</h2>
              </center>
            </div>
            <div className="col-md-1" />
            <div className="col-md-8">
              <div className="form-group">
                <i className="fas fa-search" />
                <input
                  type="text"
                  className="form-control"
                  name="isim"
                  autoComplete="off"
                  onChange={this.change}
                  placeholder="Arayın..."
                />

                <Searchdrawer
                  isim={this.state.isim}
                  isActive={this.state.isActive}
                />
              </div>
            </div>
            <div className="col-md-2">
              <Link to="/hakkimizda/">
                <button className="btn btn-info searchButton">Ara</button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Searchdrawer похож на: 

import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

export default class Searchdrawer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      productsResponse: [],
      responseRow: 0
    };
  }

  componentWillReceiveProps() {
    this.setState({ productsResponse: [] });

    if (this.props.isim != null) {
      axios
        .get("http://localhost:3500/search/" + encodeURI(this.props.isim))
        .then(res => {
          this.setState({ productsResponse: res.data });

          this.setState({ isActive: 1 });
        });
    }
  }

  render() {
    //var sliced = Object.keys(this.state.productsResponse).map(function(key) { return this.state.productsResponse[key] }).slice(5);
    return (
      <div
        className="searchDrawer"
        style={{ display: this.props.isim != "" ? "block" : "none" }}
      >
        <ul>
          {this.state.productsResponse.map((item, key) => (
            <Link to={item.plink} key={key}>
              <li>
                <img src={item.pimage} className="img" alt="" />

                <span className="cont">
                  {item.isim}
                  <br />
                  <b>{item.ucret}</b>
                </span>
              </li>
            </Link>
          ))}
        </ul>
      </div>
    );
  }
}

Проблема выглядит так, как будто из-за ввода-вывода она очень подозрительна.

Ответы [ 2 ]

0 голосов
/ 15 апреля 2019

Проблема в том, что в componentWillRecieveProps вы все еще обращаетесь к текущим реквизитам, в то время как вам нужен доступ к следующимПроппсам.

Вот как вы должны это сделать: 

  componentWillReceiveProps(nextProps) {
    this.setState({ productsResponse: [] });

    if (nextProps.isim != null) {
      axios
        .get("http://localhost:3500/search/" + encodeURI(nextProps.isim))
        .then(res => {
          this.setState({ productsResponse: res.data });

          this.setState({ isActive: 1 });
        });
    }
  }
0 голосов
/ 15 апреля 2019

Если вы используете componentWillReceiveProps, как насчет этого? 

componentWillReceiveProps(nextProps){
  if(
    nextProps.isim &&
    nextProps.isim !== this.props.isim
  ){
    axios.get("http://localhost:3500/search/"+encodeURI(this.props.isim))
      .then((res)=>{
        this.setState({
          productsResponse:res.data,
          isActive:1
        });
      })
  }
})
...