使用警告 react-hooks/exhaustive-deps 反应 useEffect 钩子 [英] React useEffect hook with warning react-hooks/exhaustive-deps

问题描述

我正在将使用 componentDidMount/Update/Unmount 生命周期的代码转换为 React Hooks，并在控制台中不断遇到 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.

我们的新代码似乎按预期工作，所以我的想法是关闭这些警告.但是，如果我错过了什么，下面的代码中是否有必要发出警告.

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.

旧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));
  }

新的 React Hooks 代码

New React Hooks code

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));
  }, []);

推荐答案

这里你在 useEffect 中使用了 container，但是因为你也在这个 effect 中设置了容器状态，所以你不能把它作为一个依赖项，否则你会得到一个无限的循环(每次调用 setContainer 时效果都会运行).

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).

我认为这可能是一个可以接受的使用 //eslint-disable-line

I think this may be an acceptable time to use // eslint-disable-line

useEffect(() => {       
   if (container) {
      const newContainer = createContainer(zIndex);
      getPortalParent().replaceWith(container, newContainer);
      setContainer(newContainer);
   }
// eslint-disable-line
}, [zIndex]);

可能还有其他示例，但您可以弄清楚哪些 useEffects 需要哪些依赖项.

There may be other examples but you can figure out which useEffects require what dependancies.

这篇关于使用警告 react-hooks/exhaustive-deps 反应 useEffect 钩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！