[英]React hooks appends unwanted value with eslint-plugin-react-hooks@next
I have a useEffect
hook in my component which call a Redux action to fetch some data. 我的组件中有一个
useEffect
钩子,它调用Redux动作来获取一些数据。
useEffect(
() => {
props.getClientSummaryAction();
},[]
);
When I go to save the file the linter does this. 当我去保存文件时,linter会这样做。
useEffect(
() => {
props.getClientSummaryAction();
}, [props]
);
Which obviously send my component into an infinite loop as getClientSummaryAction
fetches some data which updates the props. 这显然将我的组件发送到无限循环,因为
getClientSummaryAction
获取一些更新道具的数据。
I have used deconstruction like this and the linter updates the array. 我使用了这样的解构,而linter更新了数组。
const { getClientSummaryAction } = props;
useEffect(
() => {
getClientSummaryAction();
},
[getClientSummaryAction]
);
Which I am fine with but it doesn't really make sense because getClientSummaryAction
will obviously never be updated, its a function. 我很好,但它没有用,因为
getClientSummaryAction
显然永远不会更新,它是一个功能。
I just want to know why the linter is doing this and whether this is best practice. 我只是想知道为什么linter这样做以及这是否是最好的做法。
It's not unwanted. 这不是不需要的。 You know for a fact that the dependency is not going to change, but
React
can possibly know that. 你知道依赖不会改变的事实,但
React
可能知道这一点。 The rule is pretty clear: 规则很明确:
Either pass an array containing all dependencies or don't pass anything to the second argument and let
React
keep track of changes.传递一个包含所有依赖项的数组,或者不传递任何东西到第二个参数,让
React
跟踪更改。
Pass the second argument to useEffect
is to tell React that you are in charge of hook's call. 将第二个参数传递给
useEffect
是告诉React你负责hook的调用。 So when you don't pass a dependency that is included inside your effect eslint
will see this as a possible memory leak and will warn you. 因此,当您没有传递效果中包含的依赖项时,
eslint
会将此视为可能的内存泄漏,并会警告您。 DO NOT disable the rule just continue to pass the dependency as you are already doing. 不要禁用规则只是继续传递依赖关系,就像你已经在做的那样。 May feel redundant but it's for the best.
可能感到多余,但它是最好的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.