使用警告 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-line

useEffect(() => {       

   if (container) {

      const newContainer = createContainer(zIndex);

      getPortalParent().replaceWith(container, newContainer);

      setContainer(newContainer);

   }

// eslint-disable-line

}, [zIndex]);

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