时间戳

首页 > 解决方案 > 反应嘶嘶声

javascript - 反应嘶嘶声

问题描述

我是 React 新手，我的 Fizz-Buzz 应用程序一直有问题。控制台输出似乎没问题，但显示总是增加控制台编号。输出如下：

控制台：1 / 显示：2 / 文本：/ 显示文本：

控制台：2 / 显示：3 / 文本：/ 显示文本：

控制台：3 / 显示：4 / 文本：Fizz / 显示文本：Fizz

编码：

class FizzBuzz extends Component {
  constructor() {
    super()
    this.state = {
      number: 1,
      fizzbuzz: ""
    }
    this.onClick = this.onClick.bind(this)
    this.fizzOrBuzz = this.fizzOrBuzz.bind(this)
  }

  onClick() {
    let tempNo = this.state.number + 1
    this.setState({ number: tempNo })
    console.log(this.state.number)
    this.fizzOrBuzz()
  }

  fizzOrBuzz() {
    if ((this.state.number % 3 === 0) && (this.state.number % 5 === 0)) {
      console.log("fizz buzz")
      this.setState({ fizzbuzz: "Fizz-Buzz" })
    } else if (this.state.number % 3 === 0) {
      console.log("fizz")
      this.setState({ fizzbuzz: "Fizz" })
    } else if (this.state.number % 5 === 0) {
      console.log("buzz")
      this.setState({ fizzbuzz: "Buzz" })
    } else {
      this.setState({ fizzbuzz: "" })
    }
    console.log(this.state.number)
  }

  render() {
    return (
      <div className="App">
        <p>Number: {this.state.number}</p>
        <h2>{this.state.fizzbuzz}</h2>
        <button onClick={this.onClick}>Next</button>
      </div>
    )
  }
}

export default FizzBuzz

如何让页面呈现与控制台相同的数字？

标签： javascriptreactjs

解决方案

正如我在评论中提到的，this.setState()它是异步的，你必须调用this.fizzOrBuzz()它作为它的回调。

但是，由于数字的嘶嘶声或嗡嗡声始终可以从数字本身推导出来，因此它根本不应该处于状态。

function fizzOrBuzz(number) {
  if (number % 3 === 0 && number % 5 === 0) {
    return "Fizz-Buzz";
  } else if (number % 3 === 0) {
    return "Fizz";
  } else if (number % 5 === 0) {
    return "Buzz";
  }
  return "";
}

class FizzBuzz extends Component {
  constructor() {
    super();
    this.state = {
      number: 1,
    };
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.setState({ number: this.state.number + 1 });
  }

  render() {
    return (
      <div className="App">
        <p>Number: {this.state.number}</p>
        <h2>{fizzOrBuzz(this.state.number)}</h2>
        <button onClick={this.onClick}>Next</button>
      </div>
    );
  }
}

推荐阅读