Question

我正在尝试创建一个时钟，用户可以在其中选择一个位置，并在屏幕上呈现该位置的当前时间。该代码在第一次用户单击按钮时工作正常。但是，如果他们随后选择其他位置，则小时状态值应更新为新值。它这样做，但是反应也将旧值渲染到屏幕上。因此，时钟的小时在两个不同的值之间闪烁。谁能解释这种情况的发生原因，以及在用户第二次单击后如何仅显示新的小时值？

import React from 'react';
import ReactDOM from 'react-dom';
import ButtonClick from './Components/UserInputs.js'

 //define global time difference matrix
 var timeDiffMat= [0, 6, 1, 2, -5];

class Clock extends React.Component {

    constructor(props) {

        super(props);
        //this.userInput = this.userInput.bind(this);
        this.adjustForLocation = this.adjustForLocation.bind(this);
        this.tick = this.tick.bind(this);
        this.state = {CityfromChild: "", hours:0, minutes: 0, seconds: 0, 
test:''};
        //this.initialSetTime = this.initialSetTime.bind(this);
        this.setTime = this.setTime.bind(this);

    }


     adjustForLocation(citySelected, numberOfClicks) { 

        function getTimeDiff () {

            if (citySelected == "Local Time") return  timeDiffMat[0]

            if (citySelected =="Tokyo") return  timeDiffMat[1]

            if (citySelected =="Cape Town") return  timeDiffMat[2]

            if (citySelected =="Moscow")return  timeDiffMat[3]

            if (citySelected =="New York") return  timeDiffMat[4]

        }

        this.timeDiff = getTimeDiff(citySelected)

        this.tick(this.timeDiff)

    }


tick(timeDiff){

        setInterval(()=> this.setTime(timeDiff), 1000)

    }

    setTime(timeDiff){
        this.setState({
             seconds: new Date().getSeconds(), 
             minutes: new Date().getMinutes()
            });
        this.setState({hours: timeDiff + new Date().getHours() })
    }


    // unmount Clock Component and invalidate timer
     componentWillUnmount() {
            clearInterval(this.interval);
          }


    render() {
        return (
            <div className="border"> 
                <h3> Choose a city {}</h3>
                    <div className="button-container">
                        <ul>

                            <li> <ButtonClick getTimeOnClick = 
{this.userInput} adjustHoursForCity = {this.adjustForLocation} 
buttonLabel= "Local Time"/> </li> 
                            <li> <ButtonClick getTimeOnClick = 
{this.userInput} adjustHoursForCity = {this.adjustForLocation} 
buttonLabel= "Cape Town"/> </li>
                            <li> <ButtonClick getTimeOnClick = 
{this.userInput} adjustHoursForCity = {this.adjustForLocation} 
buttonLabel= "Moscow"/> </li>
                            <li> <ButtonClick getTimeOnClick = 
{this.userInput} adjustHoursForCity = {this.adjustForLocation} 
buttonLabel= "New York"/> </li>
                            <li> <ButtonClick getTimeOnClick = 
{this.userInput} adjustHoursForCity = {this.adjustForLocation} 
buttonLabel= "Tokyo"/> </li>
                            <button>{this.state.CityfromChild}</button>
                            <button>{this.state.test}</button>
                        </ul>   
                    </div>
                    <div>{this.state.hours}:{this.state.minutes}: 
{this.state.seconds} </div> 

            </div> 

        );
    }
}

Answer 1

更新时间时，您将创建一个新的setInterval，但是您不会清除旧的。因此，您将有多个setInterval使用不同的timeDiff来设置时间。

尝试类似的东西：

tick(timeDiff) {
    if (this.timer) {
        clearInterval(this.timer);
    }
    this.timer = setInterval(() => this.setTime(timeDiff), 1000)
}

Answer 2

您应将setTimeInterval绑定到组件上，例如this.mySetTimeInterval = setTimeInterval(() => {}); 在其他任何地方，您都可以停止运行间隔：

clearInterval(this.mySetTimeInterval)

Answer 3

在函数protected override void OnDisappearing() { base.OnDisappearing(); VideoView.MediaPlayer.Stop(); VideoView.MediaPlayer = null; }中，您的代码中没有this.interval中使用的componentWillUnmount，我想您想将setInterval调用的结果存储在名为interval的变量中。正如@rebecca所说，您可能应该使用

tick

为了避免比赛条件

react render正在使用新旧状态值，而不仅仅是新值

3 个答案: