Question

我正在使用React 16.13.0。我想创建一个简单的搜索组件-键入时显示结果的单个文本框。我创建了以下组件...

export default class Search extends Component {

    constructor(props) {
        super(props);
        this.state = {
            searchTerm: "",
            setSearchTerm: "",
            searchResults: [],
            setSearchResults: []
        }
        this.handleChange = this.handleChange.bind(this);

    }

    handleChange(event) {
        const query = event.target.value;
        if ( ! query ) {
            this.setState({ searchTerm: query, searchResults: [] } );
        } else {
            this.setState({ searchTerm: query, loading: true }, () => {
                this.doSearch(query);
            });
        }
    }

    doSearch = ( query ) => {
        console.log("dosearch:" + query);
        const searchUrl = '/coops/?contains=' + encodeURIComponent(query);
        fetch(searchUrl,{
            method: "GET"
        }).then(response => response.json())
          .then(data => {
            console.log("query:" + query);
            console.log(data);
            this.setState({
                searchResults: data,
                loading: false,
            });
        });
    };


    renderSearchResults = () => {
        const {searchResults} = this.state;
        if (searchResults && searchResults.length) {
            return (
                <div className="results-container">
                    <div>Results</div>
                    <ul>
                        {searchResults.map(item => (
                        <li className="result-items" key={item.id} value={item.name}>{item.name}</li>
                        ))}
                    </ul>
                </div>
            );
        }
    };

    render() {
        return (
            <div className="searchForm">
                <input
                    type="text"
                    placeholder="Search"
                    value={this.state.searchTerm}
                    onChange={this.handleChange}
                />
                { this.renderSearchResults() }
            </div>
        );
    }

问题在于，如果我键入得太快，则获取请求不一定按发送顺序完成。例如，如果我的术语是“ south”，则在我完全键入“ south”之后，可能会完成与键入“ sou”相对应的访存，从而导致结果显示不正确。如何解决这个问题并强制我的结果显示为与输入的内容相对应？

Answer 1

您需要使用 onKeyUp = {} ，这意味着当用户仅在其中键入搜索查询时，您才开始发出请求。

<input 
    type="text" 
    placeholder="Search" 
    value={this.state.searchTerm} 
    onKeyUp={this.handleChange} 
/>

如何在React应用中强制执行获取结果处理的顺序？

1 个答案: