Javascript api块被调用两次，导致渲染组件两次，尽管条件得到了正确的检查

我在setInterval中使用了3个动态变量， 处于状态

在componentDidMount内部，我做过类似的事情

componentDidMount = () => {
        let timer
        timer = setInterval( (checked, currentHash, updating) => {
            try {
                this.setState({analysis:true});
                if(checked){
                    var generatedHash = "current generated hash";
                                if (currentHash !== generatedHash) {
                                    currentHash = generatedHash;
                                    if(updating){
                                        this.setState({updating:false})
                                        const updateResponse = this.props.sendFile(DOCUMENT_ANALYSIS, ""); // my api call
                                        
                                    }
                                    else{
                                        this.setState({analysis:false})
                                    }
                                }
                                else{
                                    this.setState({analysis:false})
                                }
                    clearInterval(timer);
                    this.componentDidMount();
                }
                else{
                    clearInterval(timer);
                    this.setState({analysis:false});
                    this.componentDidMount();
                }
               
            }
            catch (error) {
                console.log("Event error", error);
            }
           
        }, 10000, this.state.checked, this.state.currentHash, this.state.updating)
    }

---

间隔设置为10秒。但是，在获得正确的状态数据之前，它会调用同一个函数两次。

您可以试试这个，也可以试试react hook，它会更好。

  componentDidMount =()=> {
     this.time();
   }


  time =()=>{
      let timer
    timer = setInterval( (checked, currentHash, updating) => {
        try {
            this.setState({analysis:true});
            if(checked){
                var generatedHash = "current generated hash";
                            if (currentHash !== generatedHash) {
                                currentHash = generatedHash;
                                if(updating){
                                    this.setState({updating:false})
                                    const updateResponse = this.props.sendFile(DOCUMENT_ANALYSIS, ""); // my api call
                                    
                                }
                                else{
                                    this.setState({analysis:false})
                                }
                            }
                            else{
                                this.setState({analysis:false})
                            }
                clearInterval(timer);
                this.componentDidMount();
            }
            else{
                clearInterval(timer);
                this.setState({analysis:false});
                this.componentDidMount();
            }
           
        }
        catch (error) {
            console.log("Event error", error);
        }
       
    }, 10000, this.state.checked, this.state.currentHash, this.state.updating)
  }

从ReactJS的

您可以在componentDidMount（）中立即调用setState（）。它将触发额外的渲染，但会在浏览器更新屏幕之前发生。这保证了即使在这种情况下render（）将被调用两次，用户也不会看到中间状态。请谨慎使用此模式，因为它通常会导致性能问题。在大多数情况下，您应该能够在构造函数（）中指定初始状态。但是，对于modals和工具提示这样的情况，当您需要在呈现取决于其大小或位置的对象之前测量DOM节点时，它可能是必需的

---

似乎setInterval可能正在立即调用setState。

Thanx以获取响应，但现在组件继续呈现，而不进行任何检查。是的，它将呈现递归调用的组件。

  componentDidMount =()=> {
     this.time();
   }


  time =()=>{
      let timer
    timer = setInterval( (checked, currentHash, updating) => {
        try {
            this.setState({analysis:true});
            if(checked){
                var generatedHash = "current generated hash";
                            if (currentHash !== generatedHash) {
                                currentHash = generatedHash;
                                if(updating){
                                    this.setState({updating:false})
                                    const updateResponse = this.props.sendFile(DOCUMENT_ANALYSIS, ""); // my api call
                                    
                                }
                                else{
                                    this.setState({analysis:false})
                                }
                            }
                            else{
                                this.setState({analysis:false})
                            }
                clearInterval(timer);
                this.componentDidMount();
            }
            else{
                clearInterval(timer);
                this.setState({analysis:false});
                this.componentDidMount();
            }
           
        }
        catch (error) {
            console.log("Event error", error);
        }
       
    }, 10000, this.state.checked, this.state.currentHash, this.state.updating)
  }