如何在反应中通过循环检查组件内部的当前状态？

Question

I mean about function tillMaxWin, when i run it, component chceck state.points, draw again but doesnt uptade state. I want to draw till points === 6 but i dont know how to fix it in React, how to uptade state inside component tillMaxWinn,check if this.state.points is < 6 and if it is true draw again till state.points is 6. Any idea?

class App extends Component {
  state = {
    MyNumbers: [],
    DrawedNumbers: [],
    ofHowMany: 49,
    howMany: 6,
    points: 0,
    numberOfDraws: 0
  };

  drawMyNumbers = () => {
    const numbers = [];
    for (let i = 0; i < this.state.howMany; i++) {
      let number = Math.floor(Math.random() * this.state.ofHowMany + 1);
      while (numbers.includes(number)) {
        number = Math.floor(Math.random() * this.state.ofHowMany + 1);
      }
      numbers.push(number);
    }
    this.setState({
      MyNumbers: numbers.sort(sortingUp)
    });
  };

  generateDrawedNumbers = () => {
    numberOfDraws = numberOfDraws + 1;
    const numbers = [];
    for (let i = 0; i < this.state.howMany; i++) {
      let number = Math.floor(Math.random() * this.state.ofHowMany + 1);
      while (numbers.includes(number)) {
        number = Math.floor(Math.random() * this.state.ofHowMany + 1);
      }
      numbers.push(number);
    }
    this.setState({
      DrawedNumbers: numbers.sort(sortingUp)
    });
  };

  componentDidUpdate() {
    this.compareNumbers();
    if (points !== this.state.points) {
      this.setState({ points: points });
    }

    if (numberOfDraws !== this.state.numberOfDraws) {
      this.setState((prevState, props) => ({
        numberOfDraws: prevState.numberOfDraws + 1
      }));
    } else return;
  }

  compareNumbers = () => {
    points = 0;
    for (let i = 0; i < this.state.howMany; i++) {
      for (let j = 0; j < this.state.howMany; j++) {
        if (this.state.MyNumbers[i] === this.state.DrawedNumbers[j]) {
          points = points + 1;

          console.log(
            "trafione" +
              this.state.MyNumbers[i] +
              " " +
              this.state.DrawedNumbers[j] +
              " Liczba losowań" +
              numberOfDraws
          );

          console.log(points);
        } else {
          console.log("nie");
        }
      }
    }
    return points;
  };

  tillMaxWin = () => {
    this.generateDrawedNumbers();
    this.compareNumbers();
    points = this.state.points;
    while (points < 6) {
      console.log("Points: " + points);
      this.tillMaxWin();
    }
  };

Answer 1

The issue you're never advancing this.state.points. Try this:

tillMaxWin = () => {
  this.generateDrawedNumbers();
  this.compareNumbers();
  while (this.state.points < 6) {
    this.setState((prevState) => ({ points: prevState.points + 1 }), () => this.tillMaxWin();
  }
}

This should trigger the function again once the state is set.