Есть ли способ изменить состояние внутри рендера в React js? - PullRequest
Новая
       6

Есть ли способ изменить состояние внутри рендера в React js?

0 голосов
/ 28 марта 2020

Итак, я работаю над приложением для игры в кости, где у меня есть компонент класса для установки количества и сторон каждой кости с помощью кнопок вверх и вниз. Моя проблема в том, что каждый раз, когда я нажимаю кнопку «вверх» или «вниз», чтобы установить количество сторон или количество кубиков, создается массив случайных чисел, который отображается на экране. Однако я хочу, чтобы значение отображалось только при нажатии кнопки прокрутки.

Так есть ли способ изменить состояние displayDice на false после того, как я создал массив в рендере, чтобы он только становится истинным, когда я снова нажимаю кнопку прокрутки

1 Ответ

0 голосов
/ 28 марта 2020

Вы можете переместить логи c на componentDidMount. Рендеринг - это просто рендеринг пользовательского интерфейса. Нет бизнес логи c. Он будет обрабатывать событие и делегировать состояние.

Переместить случайную генерацию в родительский компонент, передать метод rollChange от родителей к ребенку.

// Компонент игры в кости 

class SideAndDice extends React.Component {
  constructor(props) {
    super(props);
    this.state = { sides: 6, dice: 1, randoms: this.generateRandom() };
  }
  increaseDice() {
    this.setState({ dice: this.state.dice + 1 });
  }
  decreaseDice() {
    if (this.state.dice > 1) {
      this.setState({ dice: this.state.dice - 1 });
    }
  }
  increaseSides() {
    this.setState({ sides: this.state.sides + 1 });
  }
  decreaseSides() {
    if (this.state.sides > 2) {
      this.setState({ sides: this.state.sides - 1 });
    }
  }
  generateRandom() {
    let randoms = [];
    for (var i = 0; i < this.state.dice; i++) {
      var randomValue = Math.floor(Math.random() * this.state.sides + 1);
      randoms.push(randomValue);
    }
    return randoms;
  }
  onRollDice() {
    this.setState({ randoms: this.generateRandom() });
  }
  render() {
    return (
      <div>
        <h1>Number of Sides</h1>
        <h2>{this.state.sides}</h2>
        <button onClick={this.increaseSides.bind(this)}>Up</button>
        <button onClick={this.decreaseSides.bind(this)}>Down</button>
        <h1>Number of Dice</h1>
        <h2>{this.state.dice}</h2>
        <button onClick={this.increaseDice.bind(this)}>Up</button>
        <button onClick={this.decreaseDice.bind(this)}>Down</button>
        <CreateScores
          randoms={this.state.randoms}
          rollChange={this.rollChange.bind(this)}
        />
      </div>
    );
  }
}
class CreateScores extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onRollDice.bind(this)}>Roll</button>
        <br />
        <br />
        {this.props.randoms.map(random => (
          <Dice key={i} diceNumber={randomValue} />
        ))}
      </div>
    );
  }
}
...