Javascript 有没有办法在React js中更改渲染内部的状态？

因此，我正在开发一个骰子应用程序，其中我有一个类组件，用于设置骰子的数量和每个骰子的边，以及向上和向下按钮。我的问题是，每当我按下向上或向下按钮来设置边数或骰子数时，就会创建一个随机数数组并显示在屏幕上。但是，我希望该值仅在单击“滚动”按钮时显示

---

那么，有没有一种方法可以在渲染中创建数组后将displayDice的状态更改为false，这样只有在再次单击roll按钮时才会变为true

您可以将逻辑移动到

componentDidMount

。渲染只是渲染UI。没有商业逻辑。它将处理事件并委托给状态

将生成随机移动到父组件，将方法

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>
    );
  }
}

class SideAndDice扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={sides:6，dice:1，randoms:this.generateradom（）}；
}
递增骰子（）{
this.setState（{dice:this.state.dice+1}）；
}
减少骰子（）{
如果（this.state.dice>1）{
this.setState（{dice:this.state.dice-1}）；
}
}
递增边（）{
this.setState（{sides:this.state.sides+1}）；
}
减量{
如果（this.state.sides>2）{
this.setState（{sides:this.state.sides-1}）；
}
}
generateradom（）{
设randoms=[]；
for（var i=0；i


{this.props.randoms.map（random=>(
))}
);
}
}

你能解释一下怎么做吗？我是新的反应，所以我不知道更新！两个组件代码。现在检查@幸运的格雷沃读到：