javascript - 在 React 中使用 Lodash debounce 来防止在用户输入时请求数据

标签 javascript reactjs react-native lodash

我不想在用户输入时触发请求。我的代码应该限制请求,以便当用户快速键入时,它会触发一个具有最新输入值的请求,而不是多个请求。

现在,当我输入“test”时,它会触发 4 个不同的请求:

  1. “t”
  2. “你”
  3. “测试”
  4. “测试”

所以我找到了 lodash _.debounce 和 _.throttle ( [ https://lodash.com/docs/4.17.4#debounce] ) 但我并不真正理解如何将它应用到我的代码中。谁能帮帮我?

我的代码:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import './style.css';

import { search } from '../../actions/';

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = { searchTerm: '' };
  }

  startSearch(query) {
    const storedTerms = this.props.searchedTerm;
    let foundDuplicate = false;

    if (storedTerms.length === 0 && query) {
      return this.props.search(query);
    }

    if (storedTerms.length !== 0 && query) {
      const testDuplicate = storedTerms.map(term => term === query);
      foundDuplicate = testDuplicate.some(element => element);
    }

    if (storedTerms.length !== 0 && !query) {
      return false;
    }

    if (foundDuplicate) {
      return false;
    }

  return this.props.search(query);
}

handleInputChange(term) {
  this.setState({ searchTerm: term });
  this.startSearch(term);
}

render() {
  return (
    <div className="Search-bar">
      <input
        value={this.state.searchTerm}
        onChange={event => this.handleInputChange(event.target.value)}
      />
    </div>
  );
}


function mapStateToProps(state) {
  return {
    searchedTerm: state.searchedTerm,
    savedData: state.savedData,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ search }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);

编辑:

感谢 Sagiv b.g,我正在添加一些解释:

好的,所以用户应该输入超过 2 个字母 && 而且我的应用程序应该在开始 ajax 请求之前至少等待 2 秒


编辑 2: 感谢 Sagiv b.g,非常好的解决方案!

我已经像这样更改了我的代码:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import _ from 'lodash';
import './style.css';

import { search } from '../../actions/';

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: '' };

    this.startSearch = _.debounce(this.startSearch, 2000);
  }

  startSearch(query) {
    const storedTerms = this.props.searchedTerm;
    let foundDuplicate = false;

    if (storedTerms.length === 0 && query) {
      return this.props.search(query);
    }

    if (storedTerms.length !== 0 && query) {
      const testDuplicate = storedTerms.map(term => term === query);
      foundDuplicate = testDuplicate.some(element => element);
    }

    if (storedTerms.length !== 0 && !query) {
      return false;
    }

    if (foundDuplicate) {
      return false;
    }

    return this.props.search(query);
  }

  onChange = ({ target: { value } }) => {
    this.setState({ inputValue: value });
    if (value.length > 2) {
      this.startSearch(value);
    }
  };

  render() {
    return (
      <div className="Search-bar">
        <input
          placeholder="Type something to search GitHub"
          value={this.state.inputValue}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    searchedTerm: state.searchedTerm,
    savedData: state.savedData,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ search }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);

要处理的最后一个 Bug

但它还有最后一个错误,我不知道如何摆脱它。当用户想要更改搜索查询并使用退格键删除搜索字段时,我的应用程序总是意外地触发另一个 API 请求。 这是一个例子:

https://youtu.be/uPEt0hHDOAI

有什么办法可以摆脱这种行为吗?

最佳答案

好吧,使用 lodash _.debounce 很容易。
你用它包装你的方法并传递你想要等待的毫秒数。
至于输入的最小长度,只有当长度大于2时才调用新方法。

这是一个小的运行示例:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: '',
      inputValue: ''
    };

    this.updateMessage = _.debounce(this.updateMessage, 2000);
  }


  onChange = ({ target: { value } }) => {
    this.setState({ inputValue: value });
    if (value.length > 2) {
      this.updateMessage(value);
    }
  }


  updateMessage = message => this.setState({ message });

  render() {
    const { message, inputValue } = this.state;
    return (
      <div>
        <input placeholder="type something..." value={inputValue} onChange={this.onChange} />
        <hr/>
        <div>server call >> wait 2 seconds & min length of 2</div>
        <p>{message}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.compat.js"></script>
<div id="root"></div>

关于javascript - 在 React 中使用 Lodash debounce 来防止在用户输入时请求数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48046061/

相关文章:

javascript - 如何在 Three.js 中修复此几何图形

特定页面集的 Javascript 页面加载延迟

reactjs - React 静态页面和动态页面之间的路由

react-native - 类型错误 : undefined is not an object( evaluating 'navigator.geolocation.getCurrentPosition' ) in react-native-google-places-autocomplete

Javascript setTimeout、循环和闭包

javascript - react-dropzone 两次打开文件选择器

.htaccess - create-react-app 利用 HTTP 缓存

javascript - 在 React Native 中迭代 JSON

javascript - 有没有办法在 react-native 中缩放 View ?

javascript - 如果绑定(bind)对象被 ajax 刷新,.submit 不起作用