Question

我关注了这个主题的某个Youtube教程，我想出了这段代码。时间，基于state（dateClass）和this.time变量。时间显示在适当的区域就好了。此测试代码显示“PM”两次，因为我想查看秒数是否正在更新。正如你所看到的，他们不是。我试着用等号或只用括号写setTime。无论哪种方式，时间都不会更新。非常奇怪，因为我复制并粘贴了其他人的所作所为。

constructor(props) {
 super(props);

  this.state = {dateClass: new Date()}
  this.time = this.state.dateClass.toLocaleTimeString();

      this.hourMin = this.time.length == 10?
      this.time.slice(0):this.time.slice(0,5);

      this.diem = this.time.length == 10?
      this.time.slice(7):this.time.slice(8);    
   }

   setTime = () => {
      this.setState({
         dateClass: new Date()
      })
   }

   componentWillMount() {
      setInterval(() => this.setTime, 1000)
    }

这是渲染。

render() {
  return(
     <div className="base-content">
        <div className="close-button" onClick={this.props.close}></div>
        <div className="text">
           <p>The game's phone can bring out some game changing features, even though actually using the phone can get you killed. This is because the Phone's features might take too long to access. In the meantime, other players are taking aim at you. Some of the issues with the phone include too many
           submenu items (Contacts), the fact that it can (and will) interrupt what you're doing, and "pre-scripted load times" as the phone calls someone.
           As you click back and forth from the apps to the phone's Home button, you'll see that I propose very straightforward options to enhance & simplify the game's
           phone.
           <br />
           <br />
           For example, if you need to find a set of players to play with, you can deal with the randomness of online matchmaking where players often have
           all types of motives. You can also be more specific with the exact challenge and money details, but you have to go on reddit or another site to do that.
           Considering that the game is already online, why isn't there a Find a Crew app that allows you to find people within specific contexts.
           <br />
           <em>(P.S. The home button on the phone is clickable)</em>
           </p>
        </div>

        <section className="screen">
           <img src={phone} alt="" className="phone-svg"/>
           <img src={loading} alt="" className="app" />
           <div className="row0">
              <img src={batt} alt="" className="icon1" />
              <img src={wifi} alt="" className="icon2" />
              <p className="clock">{
                 this.hourMin + this.diem
              }</p>
              <p className="day">Mon</p>
           </div>

           <div className="row1">
              <img src={job} alt="" id="job" />
              <img src={find} alt="" id="find" />
              <img src={www} alt="" id="www" />
           </div>
           <div className="row2">
              <img src={serv} alt="" id="serv" />
              <img src={biker} alt="" id="bikers" />
              <img src={merry} alt="" id="merry" />
           </div>
           <div className="row3">
              <img src={peg} alt="" id="peg" />
              <img src={lamar} alt="" id="lamar" />
              <img src={lester} alt="" id="lester" />
           </div>
           <span id="close"></span>
        </section>
     </div>
  )

}

Answer 1

() => this.setTime 不执行this.setTime。更简单的例子：

＆＃13;

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
  foo;
}

bar();

＆＃13;

要执行某项功能，您必须将()放在其后。

＆＃13;

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
  foo();
}

bar();

＆＃13;

使用

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

或更简单：

setInterval(this.setTime, 1000)

还要记住构造函数只执行一次。您可能希望在render方法中提取各种时间部分。

您好，如何在React中显示实时时钟？

1 个答案: