javascript - 为什么当我删除搜索字段中的输入太快时，结果不会消失？ (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.');