React中如何在useState中使用变量并动态生成状态？

你遇到的问题本质是两个：一是不能在循环中声明React状态，二是JavaScript不允许用表达式作为变量名进行解构赋值。直接通过forEach循环生成userInput0这类独立状态的写法不符合React规则和JS语法，这里提供两种合理的实现方式：

方案一：用数组统一管理多个输入状态 #

用一个数组状态对应每个输入框的值，下标和userInputs的索引一一对应，是最简洁的实现方式：

'use client';
import { useState } from 'react';

export default function InputGroup() {
  const userInputs = ['hoge', '123', 'aaa'];
  // 初始化状态数组，长度和userInputs一致，初始值为空字符串
  const [inputValues, setInputValues] = useState(Array(userInputs.length).fill(''));

  // 更新指定下标的输入值
  const handleInputChange = (index, newValue) => {
    // 拷贝原数组，避免直接修改状态
    const updatedValues = [...inputValues];
    updatedValues[index] = newValue;
    setInputValues(updatedValues);
  };

  return (
    <div>
      {userInputs.map((label, index) => (
        <div key={index}>
          <span>{label}:</span>
          <input
            type="text"
            value={inputValues[index]}
            onChange={(e) => handleInputChange(index, e.target.value)}
          />
        </div>
      ))}
    </div>
  );
}

方案二：用对象状态映射命名式变量 #

如果你确实需要userInput0、userInput1这类命名的状态，可以用对象存储，通过键名映射：

'use client';
import { useState } from 'react';

export default function InputGroup() {
  const userInputs = ['hoge', '123', 'aaa'];
  // 生成初始状态对象：{ userInput0: '', userInput1: '', ... }
  const initialInputState = userInputs.reduce((acc, _, index) => {
    acc[`userInput${index}`] = '';
    return acc;
  }, {});

  const [inputState, setInputState] = useState(initialInputState);

  // 更新指定命名的输入值
  const handleInputChange = (index, newValue) => {
    // 函数式更新，确保基于最新状态修改
    setInputState(prevState => ({
      ...prevState,
      [`userInput${index}`]: newValue
    }));
  };

  return (
    <div>
      {userInputs.map((label, index) => {
        const inputKey = `userInput${index}`;
        return (
          <div key={index}>
            <span>{label}:</span>
            <input
              type="text"
              value={inputState[inputKey]}
              onChange={(e) => handleInputChange(index, e.target.value)}
            />
          </div>
        );
      })}
    </div>
  );
}

原代码的核心问题说明 #

1. 状态声明位置错误：React要求useState必须在组件或自定义Hook的顶层作用域中调用，不能放在forEach循环、条件判断或嵌套函数里，否则会导致状态更新逻辑混乱。
2. 变量名语法错误：JavaScript中不能用userInput+index.toString()这种表达式作为解构赋值的变量名，属于非法语法，必然报错。

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