[英]React useEffect hook with warning react-hooks/exhaustive-deps
I am converting code that used componentDidMount/Update/Unmount
lifecycle to React Hooks and keep coming up against react-hooks/exhaustive-deps
in the console as a warning.我正在将使用
componentDidMount/Update/Unmount
生命周期的代码转换为 React Hooks,并在控制台中不断出现react-hooks/exhaustive-deps
作为警告。
Our new code appears to work as intended and so my thoughts are to turn these warnings off.我们的新代码似乎按预期工作,所以我的想法是关闭这些警告。 However, in case I have missed something, are the warnings warranted in the below code.
但是,如果我遗漏了什么,下面的代码中是否需要警告。
Old componentDidMount/Update/Unmount
code旧
componentDidMount/Update/Unmount
代码
state = {
container: canUseDOM ? createContainer(this.props.zIndex) : undefined,
portalIsMounted: false,
};
componentDidUpdate(prevProps: Props, prevState: State) {
const { container } = this.state;
const { zIndex } = this.props;
if (container && prevProps.zIndex !== zIndex) {
const newContainer = createContainer(zIndex);
getPortalParent().replaceChild(container, newContainer);
this.setState({ container: newContainer });
} else if (!prevState.container && container) {
getPortalParent().appendChild(container);
}
}
componentDidMount() {
const { container } = this.state;
const { zIndex } = this.props;
if (container) {
getPortalParent().appendChild(container);
} else {
const newContainer = createContainer(zIndex);
this.setState({ container: newContainer });
}
this.setState({
portalIsMounted: true,
});
firePortalEvent(PORTAL_MOUNT_EVENT, Number(zIndex));
}
componentWillUnmount() {
const { container } = this.state;
const { zIndex } = this.props;
if (container) {
getPortalParent().removeChild(container);
const portals = !!document.querySelector(
'body > .portal-container > .portal',
);
if (!portals) {
getBody().removeChild(getPortalParent());
}
}
firePortalEvent(PORTAL_UNMOUNT_EVENT, Number(zIndex));
}
New React Hooks code新的 React Hooks 代码
const [container, setContainer] = useState(canUseDOM ? createContainer(zIndex) : undefined);
const [portalIsMounted, setPortalIsMounted] = useState(false);
useEffect(() => {
if (container) {
const newContainer = createContainer(zIndex);
getPortalParent().replaceWith(container, newContainer);
setContainer(newContainer);
}
}, [zIndex]);
useEffect(() => {
if (container) {
getPortalParent().appendChild(container);
}
}, [container]);
useEffect(() => {
if (container) {
getPortalParent().appendChild(container);
} else {
const newContainer = createContainer(zIndex);
setContainer(newContainer);
}
setPortalIsMounted(true);
firePortalEvent(PORTAL_MOUNT_EVENT, Number(zIndex));
}, []);
useEffect(() => {
if (container) {
getPortalParent().removeChild(container);
const portals = !!document.querySelector(
'body > .portal-container > .portal'
);
if (!portals) {
getBody().removeChild(getPortalParent());
}
}
firePortalEvent(PORTAL_UNMOUNT_EVENT, Number(zIndex));
}, []);
Here you use container in your useEffect, however since you are also setting container state in this effect you cannot put it as a dependency or else you will get an infinite loop (the effect will run every time setContainer is called).在这里,您在 useEffect 中使用容器,但是由于您还在此效果中设置了容器 state,因此您不能将其作为依赖项,否则您将获得无限循环(每次调用 setContainer 时都会运行该效果)。
I think this may be an acceptable time to use // eslint-disable-line
我认为这可能是使用
// eslint-disable-line
的可接受时间
useEffect(() => {
if (container) {
const newContainer = createContainer(zIndex);
getPortalParent().replaceWith(container, newContainer);
setContainer(newContainer);
}
// eslint-disable-line
}, [zIndex]);
There may be other examples but you can figure out which useEffects require what dependancies.可能还有其他示例,但您可以找出哪些 useEffects 需要哪些依赖项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.