javascript - 如果秒数是 3 的倍数，则打印 fuzz

Question

它包含创建一个每秒渲染时间的 React 组件，如果秒数是三的倍数，则打印“fuzz”，如果秒数是 5 的倍数，则打印“buzz”，如果是 3 和 5 的倍数，则打印“fuzzbuzz”。我是新手，但我试过了，这似乎是评估它的倍数是否已经过去并且用错误的秒打印模糊所花费的时间。

这是我写的代码

import React from 'react';
import ReactDOM from 'react-dom';
import Clock from 'react-clock';

class ShowDateTime extends React.Component {
  state = {
    date: new Date(),
    value: "",
  }


  componentDidMount() {
    // setInterval(
    //   () => this.setState({ date: new Date(), value:"buzz" }),
    //   1000
    // );
    setInterval(
      ()=>{

        if( this.state.date.getSeconds() % 3){
          this.setState({value: "fuzz"})
        }
        else if (this.state.date.getSeconds() % 5){
          this.setState({value: "buzz"})
        }
        else if (this.state.date.getSeconds() % 3 && this.state.date.getSeconds() % 5){
          this.setState({value: "fuzzbuzz"})
        }
        else{
          this.setState({value: ""})
        }
        this.setState({date: new Date()});
      },900
    )
  }

  render() {
    return (
      <div>
        <p>Current time: {this.state.date.toString()}</p>
        <Clock
          value={this.state.date}
        />
        <h1>{this.state.value} : {this.state.date.getSeconds()}</h1>
      </div>

    );

}
}


ReactDOM.render(<ShowDateTime/>, document.getElementById('root'));

Answer 1

它显示的时间不正确，因为您没有同时设置日期和值。

在 React 中 setState() 是一个异步调用。它不会立即设置状态，在 react 文档中解释如下:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

另一个问题是您的if错误，您应该将模数结果与 0 进行比较，即 seconds % 3 将每 3 秒中的每 2 秒评估为真。你的意图的正确表达是 seconds % 3 == 0(你的 if else 逻辑也是错误的，一旦它进入一个 block ，它将跳过所有其他 block )

修复这些问题后，生成的代码:

setInterval(
  () => {
    let now = new Date()
    let value = ""
    if (now.getSeconds() % 3 == 0) {
      value = "fuzz"
    }
    if (now.getSeconds() % 5 == 0) {
      value = "buzz"
    }
    if (now.getSeconds() % 15 == 0) {
      value = "fuzzbuzz"
    }

    this.setState({date: now, value: value})
  }, 900
)

甚至可以缩短为:

setInterval(
  () => {
    let now = new Date()
    let value = ""
    if (now.getSeconds() % 3 == 0) {
      value += "fuzz"
    }
    if (now.getSeconds() % 5 == 0) {
      value += "buzz"
    }

    this.setState({date: now, value: value})
  }, 900
)