useEffect/useCallback缺少依赖项警告，但redux状态不允许我修复它

Question

我正试图清理我的警告，但我面临着那些依赖性警告。

这是一个例子，但很多useEffect((都面临着类似的问题。

我试图在useCallback中调用我的获取api(在useEffect中得到了相同的东西(，但那里的过滤器参数实际上是一个redux状态

useEffect(() => {
if (checkValidRoute(env.activeSelector.menu, "indicacoes")) {
dispatch(
indicationsAction.getIndications(config.page, config.rowsPerPage, config.order, {
environmentId: env[router.query.ambiente].envId,
loginId: user.login?.id,
selectorID: env.activeSelector?.selectorID,
token: user.login.token,
details: false,
filter: {
status: config.status,
dateInit: dateFormat(beforeMonth),
dateEnd: dateFormat(today),
name: config.name,
indicatorName: config.indicatorName
}
})
)
} else {
router.push(`/${router.query.ambiente}`)
}
}, [env, config.status, config.order, dispatch, beforeMonth, config.indicatorName, config.name, config.page, config.rowsPerPage, router, today, user.login?.id, user.login.token])

这些过滤器的it值与输入相关联，我不想在更改配置状态后重新获取，因为我需要等待用户填写所有过滤器字段，但如果我的env发生更改，我需要重新加载我的页面。

我想过这个解决方案，但它不起作用

const filterParams = {
page: config.page,
rowsPerPage: config.rowsPerPage,
order: config.order,
details: false,
filter: {
status: config.status,
dateInit: dateFormat(beforeMonth),
dateEnd: dateFormat(today),
name: config.name,
indicatorName: config.indicatorName
}
}
const loadPage = useCallback(() => {
if (checkValidRoute(env.activeSelector.menu, "indicacoes")) {
dispatch(
indicationsAction.getIndications({
environmentId: env[router.query.ambiente].envId,
loginId: user.login?.id,
selectorID: env.activeSelector?.selectorID,
token: user.login.token,
}, filterParams)
)
} else {
router.push(`/${router.query.ambiente}`)
}
}, [dispatch, env, router, user.login?.id, user.login.token, filterParams])
useEffect(() => {
loadPage()
}, [loadPage])

现在我收到以下警告：The 'filterParams' object makes the dependencies of useCallback Hook (at line 112) change on every render. Move it inside the useCallback callback. Alternatively, wrap the initialization of 'filterParams' in its own useMemo() Hook.eslintreact-hooks/exhaustive-deps

如果将filterParams添加到useMemo()依赖项，也会发生同样的事情

// eslint-disable-next-line react-hooks/exhaustive-deps听起来不太好。。。

有什么解决办法吗？我认为我必须将我的形式更改为useForm()才能获得onChange值，然后在submit()之后，我设置了我的redux状态。。。但我还不知道

编辑：在这种情况下，我确实明白我们需要不同的状态来控制我的输入状态和请求状态，它们不可能相等。如果有人找到另一个解决方案，我将不胜感激(：

编辑2：通过这种方式解决：

const [ filtersState ] = useState(
{
page: config.page, 
rowsPerPage: config.rowsPerPage, 
order: config.order,
data: {
environmentId: env[router.query.ambiente].envId,
loginId: user.login?.id,
selectorID: env.activeSelector?.selectorID,
token: user.login.token,
details: false,
filter: {
status: config.status,
dateInit: dateFormat(config.dateInit),
dateEnd: dateFormat(config.dateEnd),
name: config.name,
indicatorName: config.indicatorName
}
}
}
);
const handleLoadPage = useCallback(() => {
if (checkValidRoute(env.activeSelector.menu, "indicacoes")) {
dispatch(indicationsAction.getIndications({
...filtersState,
filters: {
...filtersState.filters,
selectorID: env.activeSelector?.selectorID,
}
}))
} else {
router.push(`/${router.query.ambiente}`)
}
}, [env.activeSelector, filtersState, dispatch, router]
)
useEffect(() => {
handleLoadPage()
}, [handleLoadPage])

任何其他选择都值得赞赏

Answer 1

这里的问题是，如果你对某个东西进行了内存化，那么它的依赖项(如果在本地范围内(也必须进行内存化。

我建议您阅读这篇关于useMemo和useCallback钩子的精彩文章。

为了解决您的问题，您需要将filterParams包装在useMemo钩子中。如果它的一个依赖项在本地范围内，例如dateFormat函数，您也需要包装它。