React中如何实现数组洗牌，点击按钮触发重新渲染生成随机单词按钮组

核心实现逻辑如下：

• 提前定义固定单词池，每次洗牌前先拷贝原数组，避免污染原始数据源
• 把你提供的洗牌逻辑封装为独立工具函数，直接复用原有算法
• 通过useState存储当前需要展示的两个随机单词
• 组件初始化时生成第一组单词，点击任意按钮时重新生成单词更新state，触发页面重渲染

完整实现代码：

import { useState } from 'react';

// 固定单词池，不会被直接修改
const WORDS_POOL = [
  'monitor', 'program', 'application', 'keyboard',
  'javascript', 'gaming', 'network'
];

// 洗牌函数：输入数组返回打乱后的新数组
const shuffleArray = (arr) => {
  const newArr = [...arr];
  for (let i = newArr.length; --i;) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
  }
  return newArr;
};

// 生成2个随机单词
const getTwoRandomWords = () => {
  const shuffledWords = shuffleArray(WORDS_POOL);
  return [shuffledWords[0], shuffledWords[1]];
};

export default function RandomWordBtnGroup() {
  const [currentWords, setCurrentWords] = useState(getTwoRandomWords());

  // 点击任意按钮触发单词更新
  const handleBtnClick = () => {
    setCurrentWords(getTwoRandomWords());
  };

  return (
    <div style={{ display: 'flex', gap: '12px', padding: '20px' }}>
      <button 
        onClick={handleBtnClick}
        style={{ padding: '8px 16px', fontSize: '16px', cursor: 'pointer' }}
      >
        {currentWords[0]}
      </button>
      <button 
        onClick={handleBtnClick}
        style={{ padding: '8px 16px', fontSize: '16px', cursor: 'pointer' }}
      >
        {currentWords[1]}
      </button>
    </div>
  );
}

你可以自行调整按钮的样式代码，实现和参考示例一致的效果：

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