为了修复这个问题,你需要添加一个 清理函数 来忽略较早的返回结果:
function SearchResults({ query }) {
const [results, setResults] = useState([]);
const [page, setPage] = useState(1);
useEffect(() => {
let ignore = false;
fetchResults(query, page).then(json => {
if (!ignore) {
setResults(json);
}
});
return () => {
ignore = true;
};
}, [query, page]);
function handleNextPageClick() {
setPage(page + 1);
}
// ...
}
这确保了当你在 Effect 中获取数据时,除了最后一次请求的所有返回结果都将被忽略。