我可以根据我的查询获取数据，但获取从未停止.如何限制提取请求

Question

当我在搜索中输入时，数据将正确地从API获取。问题是，它一直获取数千次，直到API抛出错误。我成功地实现了一个abortController，但我觉得有一种不那么突然的方法可以停止获取。我使用基于查询和库存状态的useEffect钩子，但我认为我的逻辑一点也不简洁。理想情况下，我需要获取一次数据，然后等待查询状态更改时再次获取。不一定是代码中的查询和清单，但这似乎是它的唯一工作方式。

注意：如果查询中没有任何内容，则不应显示任何结果。

以下是API(不确定这个问题是否需要它(：

export const search = (query, maxResults) =>
fetch(`${api}/search`, {
method: "POST",
headers: {
...headers,
"Content-Type": "application/json",
},
body: JSON.stringify({ query, maxResults }),
})
.then((res) => res.json())
.then((data) => data.books);

这是搜索组件：

import { Link } from "react-router-dom";
import { useEffect, useState } from "react";
import * as BooksAPI from "./BooksAPI";
const SearchBooks = () => {
const [query, setQuery] = useState("");
const [bookInventory, setBookInventory] = useState([]);
useEffect(() => {
let abortFetch = false;
const getBooks = async () => {
if (query.length !== 0) {
const res = await BooksAPI.search(query, 20);
setBookInventory(res);
} 
if (query.length === 0) {
setBookInventory();
}
};
if (!abortFetch) {
getBooks();
}

return () => {
abortFetch = true;
}
}, [query, bookInventory])
const updateSearchQuery = (query) => {
setQuery(query);
};
return (
<div className="search-books">
<div className="search-books-bar">
<Link to={"/"} className={"close-search"}>Close</Link>
<div className="search-books-input-wrapper">
<input
type="text"
placeholder="Search by title, author, or ISBN"
value={query}
onChange={(e) => updateSearchQuery(e.target.value)}
/>
</div>
</div>
<div className="search-books-results">
{
typeof bookInventory === 'object' && bookInventory.length > 0
? <p>Your search results go here</p>
: <p>Enter a valid search term to see results.</p>
}
</div>
</div>
)
}
export default SearchBooks;

Answer 1

因为您已经将bookInventory放在了useEffect的第二个参数中，并将setBookInventory放在useEffect函数中。这意味着每次bookInventory发生变化时，都要调用useEffect
这就是它不断吸引人的原因。

解决方案是从useEffect:的第二个参数中删除bookInventory

useEffect(() => {
...
}, [query]);