javascript - ReactJS - 异步自动完成 API 响应处理

Question

背景

我是 ReactJS 新手，需要创建一个具有自动完成功能的搜索字段:

1. 允许自由类型
2. 每个用户输入触发API请求返回匹配数组的列表
3. 自动建议应显示最新结果

问题

API 响应以非线性顺序返回；第一个请求可能会晚于第二个请求响应，这导致状态存储不是最新请求。

export const SearchBar = () => {

const [state, setState] = useState({list: []})

const apiHandler = (term) => {
  axois.post('www.abc.com',term)
    .then((r)=> {setState({list: r.data})})
}

return(
...
)}

有什么方法可以解决这个问题？

谢谢。

Answer 1

正如已经建议的，您应该使用去抖动策略避免每次击键都点击 api。 无论如何，如果您不介意过多的请求给您的服务器带来压力，您可以使用 ref hook 来确保 api 的响应仍然相关。

我在这里创建了一个包含大量注释的工作示例: https://codesandbox.io/s/awesome-leakey-kil2e?file=/src/App.js