如何在ReactJS中实现玩家轮流生成随机数并更新对应对象属性

核心修改点 #

• 新增currentPlayer状态跟踪当前轮到的玩家
• 修复按钮点击事件的执行时机问题（避免组件渲染时自动调用）
• 正确初始化玩家数据，避免依赖未定义的状态值
• 使用函数式更新修改turn状态，确保基于最新状态更新
• 修复玩家数量输入的验证逻辑（处理字符串转数字、合法时重置验证状态）
• 实现玩家轮流逻辑，点击后自动切换到下一个玩家，超出玩家数时循环回到第一个

修改后的完整代码 #

import { useState, useEffect } from 'react';
import { TextField, Button } from '@mui/material'; // 假设使用MUI组件，按需调整

export default function SetPlayers() {
  const [playerCount, setPlayerCount] = useState<number>(2);
  const [valid, setValid] = useState<boolean>(true);
  const [turn, setTurn] = useState<Record<string, { initialValue: number }>>({});
  const [currentPlayer, setCurrentPlayer] = useState<number>(1);

  // 初始化/更新玩家列表
  useEffect(() => {
    const initialPlayers: Record<string, { initialValue: number }> = {};
    for (let i = 1; i <= playerCount; i++) {
      initialPlayers[`Player${i}`] = { initialValue: 0 };
    }
    setTurn(initialPlayers);
    setCurrentPlayer(1); // 玩家数量变化后重置回第一个玩家
  }, [playerCount]);

  // 处理玩家数量输入
  function setPlayer(event: React.ChangeEvent<HTMLInputElement>) {
    const value = Number(event.target.value);
    if (value > 4 || value < 2) {
      setValid(false);
    } else {
      setValid(true);
      setPlayerCount(value);
    }
  }

  // 生成随机数
  function randomNumberGenerate(min: number, max: number) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };

  // 处理生成按钮点击
  function handleGenerate() {
    const randomNum = randomNumberGenerate(1, 10);
    // 函数式更新turn，基于最新状态修改当前玩家的数值
    setTurn(prevTurn => ({
      ...prevTurn,
      [`Player${currentPlayer}`]: { initialValue: randomNum }
    }));
    // 切换到下一个玩家，循环处理
    setCurrentPlayer(prev => prev === playerCount ? 1 : prev + 1);
  }

  return (
    <div style={{ padding: '20px' }}>
      <TextField
        type="number"
        onChange={setPlayer}
        value={playerCount}
        label="玩家数量(2-4)"
        error={!valid}
        helperText={!valid ? "玩家数量必须在2-4之间" : ""}
        inputProps={{ min: 2, max: 4, step: 1 }}
      />
      <Button 
        onClick={handleGenerate} 
        style={{ marginLeft: '10px' }}
        disabled={!valid}
      >
        生成随机数（当前轮到：Player{currentPlayer}）
      </Button>
      
      {/* 可视化玩家数据 */}
      <div style={{ marginTop: '20px' }}>
        {Object.entries(turn).map(([playerName, data]) => (
          <div key={playerName}>
            <strong>{playerName}</strong>: {data.initialValue || 0}
          </div>
        ))}
      </div>
    </div>
  );
};

关键逻辑说明 #

1. 玩家初始化：当playerCount变化时，通过useEffect创建新的玩家对象，每个玩家初始值设为0，同时重置当前玩家为1。
2. 轮流机制：点击生成按钮时，先更新当前玩家的随机数，然后通过setCurrentPlayer计算下一个玩家——如果当前是最后一个玩家，就回到1，否则加1。
3. 状态更新安全：修改turn状态时使用函数式更新（prevTurn => ...），确保每次更新都基于最新的状态快照，避免状态不一致问题。
4. 输入验证优化：将输入值转为数字，合法时才更新玩家数量，同时在输入非法时显示错误提示。
5. 可视化展示：通过Object.entries遍历turn对象，实时显示每个玩家的当前数值。

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