Почему результаты не исчезают, когда я слишком быстро удаляю ввод в поле поиска? (Javascript)

Question

У меня есть поле ввода, которое отображает состояние и показывает результаты при изменении:

if (this.state.results === "" || this.state.results === null || this.state.results === undefined){
            showResults = null;
        } else {
            let results = this.state.results.map(result => (
                <StyledLink key={result.name} to={`/game/${result.name}`}> 
                    <SearchResult
                        name={result.name}
                    />
                </StyledLink>)
            )

            showResults = <StyledResults>{results}</StyledResults>
        }

Все работает хорошо, но когда я нажимаю кнопку удаления, чтобы быстро, даже если поле ввода пустоэто все еще показывает результаты. Этого не произойдет, если я подожду полсекунды между каждым нажатием кнопки «Удалить».

И это то, что вызывает поле ввода onChange:

findGames = (event) => {
    let searchText = event.target.value
    if (event.target.value) {
        let body = {
            "search_text": `${searchText}`, "fields": ["id", "name", "release_dates"]
        }
        axios.post(getGameIDUrl, body, headers)
            .then(res => res.data.filter((result) => { return result.type === "game" }))
            .then(res => this.setState({ results: res }))
            .then(console.log(this.state.results))
    } else {
        this.setState({ results: null })
    }


}

Answer 1

Вы должны отменить предыдущий запрос axios.post перед отправкой другого. В случае, если вы полностью удалили поисковый запрос, this.setState({ results: null }) вызывается немедленно, но предыдущие запросы все еще находятся в пути, и когда они возвращаются, они устанавливают состояние с нежелательными результатами.

Вот пример того, какчтобы отменить запрос:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

Answer 2

Вам необходимо отменить запрос, иначе вы будете устанавливать состояние при каждом возврате запроса.

Инициализация и сброс состояния в пустой массив [] вместо null также могут помочь

const CancelToken = axios.CancelToken;
let cancel;

class SomeComponent extends React.Component {
    state = {
        values:'',
        results:[]
    }
    findGames = (event) => {
        if(cancel){
            cancel()
            console.log('request canceled')
        }
        setState({ value:event.target.value, results:[]})

        if(event.target.value === ''){
                return null
        }

        const getGameIDUrl = 'www.someapi.com/api'
        const body = { "search_text": `${event.target.value}`, "fields": ["id", "name", "release_dates"]}
        const headers = {Authorization:'bearer API_TOKEN'}

        axios.post(
            getGameIDUrl, 
            body, 
            {cancelToken: new CancelToken((c)=> cancel = c)},
            headers
        ).then(res =>{
            const results = res.data.filter((result) => result.type === "game" )
            this.setState({ results })
        })
    }

    render(){
        console.log(this.state.results)

        return (
            <div>
                <input onChange={this.findGames} value={this.state.value} />
                <StyledResults>
                    {this.state.results.map(result => (
                        <StyledLink key={result.name} to={`/game/${result.name}`}> 
                            <SearchResult
                                name={result.name}
                            />
                        </StyledLink>
                    ))}
                </StyledResults>
            </div>
            )
    }
}