使用 useEffect() 和 useCallback 在 React 中获取数据

Question

Issue

我正在寻找在多个地方使用 fetch 函数时使用useEffect()获取数据的最佳方法。

情况

目前，我有一个父组件(ItemContainer)和一个子组件(SearchBar)。ItemContainer应该使用getItemList()函数获取所有可能的项目列表。我在第一次渲染期间在useEffect()内执行此函数，并将其传递给SearchBar组件，以便当用户提交搜索词时，它将通过触发ItemContainer中的getItemList()来更新itemList状态。

这实际上正如我预期的那样工作。但是，我的问题是

1. 我真的不确定在这种情况下是否可以在useEffect()之外定义getItemList()。根据我一直在阅读的内容(博客文章，反应官方文档)，通常建议在useEffect()内部定义数据获取功能，尽管可能存在一些边缘情况。我想知道我的情况是否适用于这种边缘情况。
可以将
2. 依赖数组留空吗useCallback？我尝试使用searchTerm、itemList填写它，但没有一个有效 - 我很困惑为什么会这样。

我感觉很糟糕，因为我没有完全理解我写的代码。如果你们中的任何人能启发我我在这里错过的东西，我将不胜感激......

项容器

const ItemContainer = () => {
const [itemList, setItemList] = useState([]);

const getItemList = useCallback( async (searchTerm) => {
const itemListRes = await Api.getItems(searchTerm);
setItemList(itemListRes)
}, []);

useEffect(() => {
getItemList();
}, [getItemList]);

return (
<main>
<SearchBar search={getItemList} />
<ItemList itemList={itemList} />
</main>
)
}

搜索栏

const SearchBar = ({ search })  => {
const [searchTerm, setSearchTerm] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
search(searchTerm);
setSearchTerm('');
}
const handleChange = (e) => {
setSearchTerm(e.target.value)
}
return (
<form onSubmit={handleSubmit}>
<input 
placeholder='Enter search term...'
value={searchTerm}
onChange={handleChange}
/>
<button>Search</button>
</form>
)
}

Answer 1

这是我的答案。

1. 是的，没关系。useCallback里面是"冻结"的尊重 可能发生的许多ItemConteiner函数调用。自从useCallback内容只访问setItemList，这也是一个 冷冻处理程序，不会有问题。

2. 这也是正确的，因为空数组表示"依赖于 什么都没有"。换句话说，回调创建一次并保留 冻结了ItemContainer的所有生命.

相反，这很奇怪：

useEffect(() => {
getItemList();
}, [getItemList]);

它有效，但它的意义很小。getItemList只创建一次，那么为什么要根据永远不会改变的东西来制作useEffect呢？

通过仅运行一次使其更简单：

useEffect(() => {
getItemList();
}, []);