React Live-Search with Fetch API

Question

我想知道如何使用 Fetch API 在 React 中实现实时搜索功能。

问题：通过 Fetch 对 API 的调用的响应可能会以错误的顺序返回。

我正在考虑为请求添加时间戳，但我认为必须为这种常见功能提供一些更好的解决方案。

这是我到目前为止的代码：

const TagPicker = ({ className }) => {
const [searchText, setSearchText] = useState('');
const [proposedTags, setProposedTags] = useState([]);
const handleChange = e => {
const val = e.target.value;
setSearchText(val);
async function fetchTags() {
const res = await fetch(`api-url/${val}`);
res.json()
.then(res => setProposedTags(res))
.catch(err => console.log(err));
}
val.length ? fetchTags() : setProposedTags([]);
};
return(
<div className={className}>
<Input placeholder="Name a tag" value={searchText} onChange={handleChange} />
<TagList tags={proposedTags} />
</div>
);
};
export default TagPicker;

Answer 1

您可以将我的示例与带有钩子的去抖动示例一起使用

Answer 2

好吧，如果它们以错误的顺序返回，那么服务器应该负责以正确的顺序呈现响应。

你可以做类似的事情

const res = await fetch(`api-url/${val}/asc`); //to get it in ascending order for example

当然，根据您拥有的服务器，您也可以在前端(不推荐(m 上对其进行排序，这将与您提到的完全相同，使用时间戳或其他值。