Как заставить порядок обработки результатов выборки в моем приложении React? - PullRequest
Новая
       6

Как заставить порядок обработки результатов выборки в моем приложении React?

0 голосов
/ 26 марта 2020

Я использую 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>
        );
    }

Проблема в том, что если я набираю слишком быстро, запросы на выборку не обязательно завершаются в том порядке, в котором они были отправлены. Например, если мой термин «южный», выборка, соответствующая введенному «sou», может завершиться после того, как я полностью напечатал «южный», что приведет к неправильному отображению результатов. Как мне это учесть и заставить отображать мои результаты в соответствии с набранными данными?

1 Ответ

0 голосов
/ 26 марта 2020

Вам нужно использовать onKeyUp = {} , это означает, что когда пользователь закончит вводить свой поисковый запрос только там, вы начнете делать запрос. 

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