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

从去抖输入来看，问题似乎非常可疑。

Answer 1

如果您使用的是preg_match，该怎么办？

componentWillReceiveProps

Answer 2

与此相关的问题是，在componentWillRecieveProps中，您仍在访问当前道具，而您需要访问nextProps。

这是您应该如何做：

  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问题

2 个答案: