反应为什么我的clearInterval无法停止setInterval？

debugcn 发表于 Dev

Zihao Li

我对React完全陌生。我尝试实现的是一个计时器。当单击小时，分钟或秒时，计时器将停止，并且在单击Enter按钮后，对于选定的计时器，它将变成一个输入字段，它不应再显示任何输入字段并重新开始计时。看起来怎么样

单击flexbox容器时，我尝试停止将新道具传递给子组件。我写了一个handleClick函数和setInterval（）或clearInterval（）基于状态中的update变量。

我想要的是，当我单击小时/分钟/秒中的任何一个时，选择字段将更改为输入字段，并且计时器停止。一旦我按回车，它将返回到计时器。

class Timer extends React.Component{
    constructor(props){
        super (props);
        this.timerRef = React.createRef();
        this.state = {
            hh: new Date().getHours().toString().padStart(2,"0"),
            mm: new Date().getMinutes().toString().padStart(2,"0"),
            ss: new Date().getSeconds().toString().padStart(2,"0"),
            suffix: new Date().getHours() > 12 ? "PM" : "AM",
            update:true,
        };
    }

    tick() {
        this.setState({
            hh: new Date().getHours().toString().padStart(2,"0"),
            mm: new Date().getMinutes().toString().padStart(2,"0"),
            ss: new Date().getSeconds().toString().padStart(2,"0"),
            suffix: new Date().getHours() > 12 ? "PM" : "AM",
        })
    }


    componentDidMount(){
        this.intervalId = setInterval(
            () => this.tick(), 1000
        );
    }
    
    componentWillUnmount(){
        clearInterval(this.intervalId);
    }

    handleClick(){       
        this.setState(state => ({update: !state.update}));
        console.log("1",this.state.update);
        if (this.state.update){
            this.intervalId = setInterval(
                () => this.tick(), 1000
            );
            console.log("2 set interval",this.intervalId);
        }
        else{
            clearInterval(this.intervalId);
            console.log("2 clear interval");
        }
    }

    render() {
        const { hh, mm, ss, suffix } = this.state;
        return (
          <div className="box" > London Clock
              <div className="flexbox-container" onClick={() => this.handleClick()}>
                <Content time={hh}></Content>
                <div><p>:</p></div>
                <Content time={mm}></Content>
                <div><p>:</p></div>
                <Content time={ss}></Content>
                <div className="suffix"><p>{suffix}</p></div>
              </div>
          </div>
        );
    }
}

class Content extends React.Component {
    state = {
        editMode: false,
        time: ""
    };

    componentDidMount(){
        this.setState({
            time: this.props.time,
        })
    }
    
    
    handleKeyDown(event){
        console.log(event,event.key === 'Enter');
        if (event.key === 'Enter'){
            this.setState({
                editMode: false,
            })
        } 
    }
    
    render() {
        const {editMode} = this.state;
        return (
            <div> 
              {editMode? (
                    <p>
                        <input
                        defaultValue={this.props.time}
                        onKeyPress={e => this.handleKeyDown(e)}
                    />
                    </p>
              ) : (
                    <p onClick={() => this.setState({ editMode: true })}>{this.props.time}</p>
              )}
            </div>
          );
    }
}

ReactDOM.render(
    <Timer/>,
    document.body
  );

.flexbox-container {
    display: flex;
    flex-direction: row;
}

.suffix{
    padding-left: 20px;
}

.box{
    border-style: solid;
    padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

杜比

装入组件后，它将开始一个间隔并将其分配给intervalId。

您的点击处理程序会修改状态，然后立即尝试查看状态，而无需等待其更新。此时状态可能尚未更新，因此它重新分配了间隔，从而导致了僵尸更新程序。

将回调传递给setState(updater, [callback])或将interval-logic移至componentDidUpdate，这将允许您删除间隔逻辑的重复数据

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。