如何在React中结合Bootstrap动态渲染指定数量的行列（幸运轮盘场景）

问题原因 #

你的代码存在几个核心错误导致无法正常渲染：

1. setState 是异步更新的，你在 randomWordGenerator 方法中刚给 randomPhrase 赋值，就直接用 this.state.randomPhrase 拆分数组，此时拿到的还是更新前的旧值，拆分出来的字符数组根本不对。
2. 你定义的 renderRows、renderColumns 方法都没有返回值，即使调用也不会返回可渲染的JSX内容。
3. 直接修改 this.state.index 的值不符合React规范，所有state修改必须通过 setState 触发，否则不会触发组件重渲染。
4. 你在render函数中渲染了 this.state.splicedArray，但你在初始化state的时候根本没有定义这个属性，自然什么都不会显示。

修复方案 #

不需要额外写复杂的行列拆分函数，直接按空格把随机短语拆分为单词数组，每个单词单独占一行即可，逻辑更简洁：

1. 修正随机短语生成方法

randomWordGenerator = () => {
  // 先提前计算好新的随机短语，不要依赖setState后的state值
  const newPhrase = this.phrases[Math.floor(Math.random() * this.phrases.length)];
  this.setState({ 
    randomPhrase: newPhrase,
    wordArray: newPhrase.split(' '),
    charactersArray: newPhrase.split('')
  });
};

2. 简化render渲染逻辑

直接遍历单词数组生成每行内容，不需要额外的Render按钮，生成短语后会自动重渲染：

render(){
  return(                   
    <Container className="p-3">
      <Button variant="outline-primary" size="lg" onClick={this.randomWordGenerator} className="mb-3">生成随机短语</Button>
      {/* 每个单词渲染为单独一行 */}
      {this.state.wordArray.map((word, rowIdx) => (
        <Row key={rowIdx} className="mb-2 gx-1">
          {/* 单词的每个字符渲染为一个Square */}
          {word.split('').map((char, colIdx) => (
            <Col key={colIdx} xs="auto">
              <Square value={char}/>
            </Col>
          ))}
        </Row>
      ))}
    </Container>
  );
}

3. 可删除无用代码

你可以把原来的 renderRows、renderColumns、renderSquares 方法，还有没用的Render按钮都删掉，上述逻辑已经完全覆盖你的需求。

内容的提问来源于stack exchange，提问作者Grace