如何用useState存储未知长度的玩家姓名输入数组状态

核心思路 #

通过两个关联的 useState 状态分别管理玩家数量和玩家姓名数组，根据玩家数量动态调整数组长度，同时支持逐个更新数组内的姓名值。

具体实现代码 #

import { useState } from 'react';

function PlayerSetup() {
  // 初始化玩家数量（默认2人）和对应长度的空姓名数组
  const [playerCount, setPlayerCount] = useState(2);
  const [playerNames, setPlayerNames] = useState(Array(playerCount).fill(''));

  // 切换玩家数量时，调整姓名数组长度（保留已有输入）
  const handlePlayerCountChange = (count) => {
    setPlayerCount(count);
    setPlayerNames(prevNames => {
      const updatedNames = [...prevNames];
      // 数量增加：补充空字符串到目标长度
      while (updatedNames.length < count) {
        updatedNames.push('');
      }
      // 数量减少：截断数组到目标长度
      if (updatedNames.length > count) {
        updatedNames.splice(count);
      }
      return updatedNames;
    });
  };

  // 更新指定索引的玩家姓名
  const handleNameInputChange = (index, newValue) => {
    setPlayerNames(prevNames => {
      const newNames = [...prevNames];
      newNames[index] = newValue;
      return newNames;
    });
  };

  return (
    <div>
      {/* 玩家数量选择区域 */}
      <div>
        <span>选择玩家人数：</span>
        <button onClick={() => handlePlayerCountChange(2)}>2人</button>
        <button onClick={() => handlePlayerCountChange(3)}>3人</button>
        <button onClick={() => handlePlayerCountChange(4)}>4人</button>
      </div>

      {/* 动态生成的姓名输入框 */}
      <div style={{ marginTop: '16px' }}>
        {playerNames.map((name, index) => (
          <div key={index} style={{ marginBottom: '8px' }}>
            <label>玩家{index + 1}：</label>
            <input
              type="text"
              value={name}
              onChange={(e) => handleNameInputChange(index, e.target.value)}
              placeholder="请输入姓名"
            />
          </div>
        ))}
      </div>

      {/* 可用于调试/提交的预览 */}
      <div style={{ marginTop: '16px' }}>
        <span>已输入玩家：</span>
        {playerNames.filter(n => n).join(', ')}
      </div>
    </div>
  );
}

export default PlayerSetup;

关键细节说明 #

• 避免直接修改原数组：React 状态是不可变的，必须通过解构原数组生成新数组后修改，再传递给 setPlayerNames。
• 受控组件处理：每个输入框绑定对应索引的数组值，确保输入状态和 useState 完全同步，避免 uncontrolled 组件警告。
• 保留已有输入：切换玩家数量时，不会清空已输入的姓名，只会补充或截断数组，提升用户体验。

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