Javascript 使用带有警告的React React挂钩/详尽的DEP的React USEFACTION挂钩

我正在将使用

componentDidMount/Update/Unmount

生命周期的代码转换为React hook，并在控制台中不断遇到

React Hooks/deps

，作为警告

我们的新代码似乎按预期工作，因此我的想法是关闭这些警告。但是，如果我遗漏了什么，下面的代码中是否有警告

旧

componentDidMount/Update/Unmount

code

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

新代码

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中使用容器，但是由于您也在该效果中设置容器状态，因此不能将其作为依赖项，否则将得到一个无限循环（每次调用setContainer时，该效果都会运行）

我认为现在使用

//eslint disable line

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

---

可能还有其他示例，但您可以找出哪些useEffects需要什么依赖性。

组件的代码将卸载应该从

useEffect

回调返回。您可以解释为什么错误实际上没有发生吗？我不确定是否理解？抱歉，我跳过了几行。我以为你说OP有一个无限循环，因为我跳过了“否则”部分。