在搜索框上书写时遇到 axios 问题

Question

我正在尝试通过 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>
    );
  }
}

这个问题从debounce-input看来很可疑。

Answer 1

如果您正在使用 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
        });
      })
  }
})

Answer 2

问题在于，在 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 });
        });
    }
  }

在搜索框上书写时遇到 axios 问题

Having a problem with axios while writing on search box

javascript

frontend

reactjs

axios

debounce