javascript - 在 props 渲染上取消 componentDidMount 中的 setInterval

Question

如果 this.props.firebase 不等于 null，如何取消 setInterval？

VerifyEmail = () => {
  const { firebase } = this.props;
  console.log(firebase);
  if (firebase !== null) {
    this.setState({ validCode: true, verifiedCode: true });
  }
};

componentDidMount() {
  const { firebase } = this.props;
  if (firebase === null) {
    this.intervalID = setInterval(() => this.VerifyEmail(), 1000);
  } else if (firebase !== null) {
    clearInterval(this.intervalID);
  }
}

componentWillUnmount() {
  clearInterval(this.intervalID);
}

目前，如果 this.props.firebase 不等于 null，则重复 this.VerifyEmail 并尝试 clearInterval 不运行。

此外，如果您有另一种方法可以在页面渲染时以及当 this.props.firebase 不等于 时自动执行 this.VerifyEmail() 操作空。请提出建议。

Answer 1

componentDidMount (或简称 cDM)在安装组件时仅运行一次。稍后当您更改 props 时，前提是它不会被调用。 props 更改后 componentDidUpdate正在运行。您可以将检查放在那里，同时记住检查 prevProps.firebase !== this.props.firebase 否则您可能会陷入无休止的重新渲染。就这样

componentDidUpdate(prevProps) {
    const { firebase: prevFirebase } = this.prevProps;
    const { firebase } = this.props;
    if (!prevFirebase && firebase) { // null => not-null
        this.intervalID = setInterval(() => this.VerifyEmail(), 1000);
    }
    if (prevFirebase && !firebase) { // not-null => null
        clearInterval(this.intervalID);
    }
}

不要错过在 componentDidMount 中放置相同的逻辑(对于最初提供了 props.firebase 的情况)和 componentDidUpdate(对于当 props.firebase 最初为 null 然后分配给 props 时的情况)。

但我相信可能会有更多的 DRY 解决方案。在检索数据之前，您真的需要渲染此组件吗？您是否会渲染一些占位符，直到出现 firebase 并加载数据？如果是，那么将数据加载提升到父组件怎么样？然后您的组件将通过 props 检索数据，并且它的渲染可能像 (this.props.data && ...)

一样简单