我不想在用户输入时触发请求。我的代码应该限制请求,以便当用户快速键入时,它会触发一个具有最新输入值的请求,而不是多个请求。
现在,当我输入“test”时,它会触发 4 个不同的请求:
- “t”
- “你”
- “测试”
- “测试”
所以我找到了 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 请求。 这是一个例子:
有什么办法可以摆脱这种行为吗?
最佳答案
好吧,使用 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/