React Fizz-Buzz

Question

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

Console: 1/ Display: 2/ Text: / Display Text：

Console: 2/ Display: 3/ Text: / Display Text：

Console: 3/ Display: 4/ Text: Fizz / Display Text: 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

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

Answer 1

正如我在注释中提到的，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>
    );
  }
}

Answer 2

设置状态并调用使用该状态的fizzbuzz将不起作用，因为该状态可能已更新，也可能未更新。您应该将fizzbuzz作为回调，以确保在使用它之前已经更新了状态。

https://reactjs.org/docs/react-component.html#setstate