[英]React Hook useCallback has a missing dependency. Either include it or remove the dependency array react-hooks/exhaustive-deps
I used useEffect
in my component in order to execute an async function.我在我的组件中使用了useEffect
来执行异步 function。
useEffect(() => {
scoreRequest(answers);
}, [answers]);
Then I get this warning:然后我得到这个警告:
React Hook useCallback has a missing dependency: 'scoreRequest'. Either include it or remove the dependency array react-hooks/exhaustive-deps
I used the useCallback
to avoid this warning:我使用useCallback
来避免这个警告:
const getScore = useCallback(() => {
scoreRequest(answers);
}, [answers]);
useEffect(() => {
scoreRequest(answers);
}, [answers]);
But still got the same error.但仍然得到同样的错误。 However, I found a similar question and it's mentioned in the answer either to declare the function into the useEffect or I could disable the rule.但是,我发现了一个类似的问题,并且在答案中提到了将 function 声明为 useEffect 或者我可以禁用该规则。 The function scoreRequest()
declared in another file and I don't want to mix it with my component. function scoreRequest()
在另一个文件中声明,我不想将它与我的组件混合。
export const scoreRequest = (answers: IAnswer[]): ThunkAction<void, AppState, null, Action<string>> => {
return async (dispatch: Dispatch) => {
dispatch(startScoreRequest());
getScoreApi(answers).then((response: AxiosResponse) => {
const { data } = response;
const answer = {
scoreLabel: data.message,
userScore: data.result.userScore,
totalScore: data.result.totalScore,
emoji: data.result.emoji,
scoreLabelColor: data.result.scoreLabelColor
};
dispatch(successScore(answer));
}, (error: AxiosError) => {
let errorMessage = "Internal Server Error";
if (error.response) {
errorMessage = error.response.data.error;
}
dispatch(failScore(errorMessage));
dispatch(errorAlert(errorMessage));
});
};
};
Is it any solution to fix this warning?有什么解决方案可以解决此警告吗?
When receving functions as props
you should explicitly declare it inside your dependency array, the problem is functions change every render.当接收函数作为props
时,你应该在你的依赖数组中明确声明它,问题是函数每次渲染都会改变。 For what I can see from your code scoreRequest
is an action creator.从您的代码中我可以看到scoreRequest
是一个动作创建者。 You could import it outside your component and dispatch
it like this您可以将其导入组件外部并像这样dispatch
它
import { actionCreator } from './actions'
import { useDispatch } from 'react-redux'
const Component = () =>{
const dispatch = useDispatch()
useEffect(() =>{
dispatch(actionCreator(answers))
},[dispatch, answers])
}
This will avoid es-lint
warning, cause your action creator it's imported outside your component, and dispatch
it's memoized so it won't change every render.这将避免es-lint
警告,导致你的动作创建者将它导入到你的组件之外,并dispatch
它被记忆,因此它不会改变每个渲染。 React-redux even mentioned that if you need to pass an action creator via props you should memoize it first React-redux 甚至提到如果你需要通过道具传递一个动作创建者你应该先记住它
When passing a callback using dispatch to a child component, it is recommended to memoize it with useCallback, since otherwise child components may render unnecessarily due to the changed reference.当使用 dispatch 将回调传递给子组件时,建议使用 useCallback 对其进行记忆,否则子组件可能会由于引用的更改而不必要地呈现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.