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

Question

我正在将使用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]);

Answer 1

在这里，您在 useEffect 中使用容器，但是由于您也在此效果中设置容器状态，因此您不能将其作为依赖项，否则您将获得无限循环（每次调用 setContainer 时效果都会运行）。我认为这可能是一个可以接受的使用时间 // eslint-disable-lineuseEffect(() => {          if (container) {      const newContainer = createContainer(zIndex);      getPortalParent().replaceWith(container, newContainer);      setContainer(newContainer);   }// eslint-disable-line}, [zIndex]);可能还有其他示例，但您可以弄清楚哪些 useEffects 需要哪些依赖项。