在React中使用useseffect（）和usecallback提取数据

Question

问题

我正在寻找最佳的方法来使用useeffect（）在多个地方使用fetch函数时。

当前情况

，我有一个父组件（itemContainer）和一个子组件（searchbar）。 itemContainer应使用getItemlist（）函数获取所有可能的项目列表。我在第一个渲染过程中在usefect（）中执行此功能，还将其传递到searchbar组件，以便当用户提交搜索词时，将在getItemlist（）中更新itemList状态> itemcontainer。

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

1. 我不确定是否可以在这种情况下定义getItemlist（） useeffect（）。根据我一直在阅读的内容（博客帖子，官方文档），通常建议在usefeft（）内定义数据获取功能，尽管可能会有一些边缘情况。我想知道我的案件是否适用于这种边缘情况。
2. 可以在usecallback中将依赖项数组空留置吗？我尝试使用searchTerm，itemList填充它，但是它们都没有起作用 - 我很困惑为什么这样。

我不完全理解我编写的代码感到难过。如果有人能以我在这里缺少的东西来启发我...

ItemContainer

    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 content仅访问setItemlist，这也是一个
   冷冻处理程序，没有问题。

2. 这也是正确的，因为空数组的意思是“依赖
   什么都没有”。换句话说，回调是一次创建的，并保留
   冻结itemContainer。

相反，这很奇怪：

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

它有效，但几乎没有任何感觉。 getItemlist仅创建一次，那么为什么要根据某些事物从未改变？

使它变得更简单，仅运行一次：

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