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

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

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>

        );
    }
}

最佳答案

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

尝试类似：

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

关于javascript - react render正在使用新旧状态值，而不仅仅是新值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57055222/