使用警告 react-hooks/exhaustive-deps react useEffect 钩子

IT技术 javascript reactjs react-hooks
2021-05-16 20:00:07

我正在将使用componentDidMount/Update/Unmount生命周期的代码转换为 React Hooks,并不断出现react-hooks/exhaustive-deps在控制台中作为警告。

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

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 代码

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));
  }, []);
1个回答

在这里,您在 useEffect 中使用容器,但是由于您也在此效果中设置容器状态,因此您不能将其作为依赖项,否则您将获得无限循环(每次调用 setContainer 时效果都会运行)。

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

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

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