我应该如何组织React项目以避免React挂钩/穷举deps

Question

简化结构如下：

<context>
<component />
<context>

context.tsx存储数据和获取函数：

const [data, setData] = useState(0)
const getData =async () => {
const data = await get("/api")
setData(data)
}
export default <Provider value={data, getData} />

在组件内部，使用useEffect发出请求：

const {data, getData} = useContext(context)
useEffect(()=>{
getData()
},[data]) // react-hooks/exhaustive-deps occurs here, it says I should put getData in the array. However, it will cause infinity loop.
return <div>{data}</div>

那么，如何重新组织结构以避免出现警告呢？顺便说一句，在上下文中发出请求可以吗？

Answer 1

使用useMemo，您可以记忆getData函数，使其引用永远不会更改。这将使您通过exhaustive-deps:

const [data, setData] = useState(0);
const getData = useMemo(() => () => {
const data = await get("/api");
setData(data);
}, [setData]);

setData在依赖数组中是可以的，因为状态设置器函数是稳定的。

Btw，在上下文中发出请求可以吗？

当然，它本身没有什么问题。