如何动态控制数量不固定的输入框的状态？

方法一：用对象存储输入值（推荐） #

如果API返回的每个item带有唯一标识（比如id），用对象存储每个输入框的值是最稳妥的方案，能避免数据顺序变化导致的状态错乱：

import { useState } from 'react';

function DynamicInputs({ data }) {
  // 初始化空对象，后续以item的唯一标识为键存储对应输入值
  const [inputValues, setInputValues] = useState({});

  const handleInputChange = (itemId, value) => {
    setInputValues(prev => ({
      ...prev,
      [itemId]: value
    }));
  };

  return (
    <div>
      {data.map((item) => (
        // 优先用item的唯一id做key，别用索引
        <div key={item.id}>
          <span>Input {item.id}</span>
          <input
            value={inputValues[item.id] || ''}
            onChange={(e) => handleInputChange(item.id, e.target.value)}
          />
        </div>
      ))}
    </div>
  );
}

如果API返回的item没有唯一id，可以临时用索引当键，但要注意：如果数据列表会新增、删除或排序，索引可能导致状态和输入框不匹配：

const [inputValues, setInputValues] = useState({});

const handleInputChange = (index, value) => {
  setInputValues(prev => ({
    ...prev,
    [index]: value
  }));
};

// 渲染部分
{data.map((item, index) => (
  <div key={index}>
    <span>Input Number {index + 1}</span>
    <input
      value={inputValues[index] || ''}
      onChange={(e) => handleInputChange(index, e.target.value)}
    />
  </div>
))}

方法二：用数组存储输入值 #

如果数据列表的顺序固定不会变动，也可以用数组对应每个输入框的值，初始化时根据data长度生成空数组：

import { useState } from 'react';

function DynamicInputs({ data }) {
  // 初始化数组，每个元素对应一个输入框的初始空值
  const [inputValues, setInputValues] = useState(() => 
    data.map(() => '')
  );

  const handleInputChange = (index, value) => {
    // 复制原数组再修改对应位置的值，遵循React不可变状态原则
    const newValues = [...inputValues];
    newValues[index] = value;
    setInputValues(newValues);
  };

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>
          <span>Input Number {index + 1}</span>
          <input
            value={inputValues[index]}
            onChange={(e) => handleInputChange(index, e.target.value)}
          />
        </div>
      ))}
    </div>
  );
}

注意事项 #

• 尽量不用数组索引作为key，如果数据列表有增删或排序操作，会引发React渲染异常，优先使用每个item的唯一标识。
• 处理onChange时，不能直接修改原状态，要通过展开运算符或数组复制生成新的状态对象/数组，符合React状态不可变的要求。

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