只要用户在打字,我就不想触发请求。我的代码应该限制请求,以便当用户快速键入时,它将使用最新的输入值而不是许多来触发一个请求。
现在,当我输入“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 bg,我添加了一些解释:
好的,所以用户应该输入 2 个以上的字母 && 我的应用程序应该在开始 ajax 请求之前至少等待 2 秒
EDIT2:感谢 Sagiv bg,以获得很好的解决方案!
我已经像这样改变了我的代码:
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);
最后一个要处理的错误
但它还有最后一个错误,我不知道如何摆脱。当用户想要更改搜索查询并使用退格键清除搜索字段时,我的应用程序总是意外触发另一个 API 请求。下面是一个例子:
有什么想法可以摆脱这种行为吗?