Question

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

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.VerifyEmail，并且如果clearInterval不等于this.props.firebase的情况下我尝试进行null的尝试。

此外，如果您有另一种方法可以在页面呈现时自动this.VerifyEmail()，并且this.props.firebase不等于null。请提出建议。

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最初是{{的情况下） 1}}和更高版本分配给null）。

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

一样简单

在props渲染上取消componentDidMount中的setInterval

1 个答案: