如何在React useState中存储并更新含数组的多值状态？

当前你的changeHandler仅能处理字符串、数字等基础类型的状态更新，但size和color是数组类型，直接赋值e.target.value会把数组覆盖成字符串，导致类型错误且无法正确收集多值。需要针对不同字段类型做差异化处理，以下是具体修改方案：

1. 优化变更处理函数 #

使用函数式更新（依赖prevState）确保基于最新状态修改，同时区分字段类型处理：

const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { name, value, type, checked } = e.target;

  setAllValues(prevState => {
    // 处理数组类型字段：size、color
    if (name === 'size' || name === 'color') {
      let updatedArray: string[];
      // 复选框场景：选中添加值，取消移除值
      if (type === 'checkbox') {
        updatedArray = checked
          ? [...(prevState[name as keyof IProduct] as string[]), value]
          : (prevState[name as keyof IProduct] as string[]).filter(item => item !== value);
      } else {
        // 可选：如果用逗号分隔的文本输入，拆分字符串为数组
        updatedArray = value.split(',').map(item => item.trim()).filter(item => item);
      }
      return { ...prevState, [name]: updatedArray };
    }
    // 处理数字类型字段：price
    else if (name === 'price') {
      return { ...prevState, [name]: Number(value) || 0 };
    }
    // 处理布尔类型字段：inStock
    else if (name === 'inStock') {
      return { ...prevState, [name]: checked };
    }
    // 处理其他字符串类型字段
    else {
      return { ...prevState, [name]: value };
    }
  });
};

2. 调整对应输入组件 #

根据字段类型更换合适的输入控件，并设置受控属性确保状态同步：

字符串/数字类型（保持原输入框，补充受控值） #

<input
  type='text'
  className='form-control'
  id='name'
  name='name'
  placeholder='Enter a Name'
  onChange={changeHandler}
  value={allValues.name} // 受控值，确保状态同步
/>

<input
  type='number'
  className='form-control'
  id='price'
  name='price'
  placeholder='Enter Price'
  onChange={changeHandler}
  value={allValues.price}
/>

数组类型（改用复选框实现多选） #

{/* Size选项示例 */}
<div className='size-options'>
  {['S', 'M', 'L', 'XL'].map(size => (
    <div key={size}>
      <input
        type='checkbox'
        id={`size-${size}`}
        name='size'
        value={size}
        onChange={changeHandler}
        checked={allValues.size.includes(size)} // 受控选中状态
      />
      <label htmlFor={`size-${size}`}>{size}</label>
    </div>
  ))}
</div>

{/* Color选项示例 */}
<div className='color-options'>
  {['Red', 'Blue', 'Green'].map(color => (
    <div key={color}>
      <input
        type='checkbox'
        id={`color-${color}`}
        name='color'
        value={color}
        onChange={changeHandler}
        checked={allValues.color.includes(color)}
      />
      <label htmlFor={`color-${color}`}>{color}</label>
    </div>
  ))}
</div>

布尔类型（复选框） #

<div>
  <input
    type='checkbox'
    id='inStock'
    name='inStock'
    onChange={changeHandler}
    checked={allValues.inStock}
  />
  <label htmlFor='inStock'>In Stock</label>
</div>

关键说明 #

• 函数式更新：避免因setState异步特性导致的旧值引用问题，确保每次更新基于最新状态。
• 受控组件：所有输入控件绑定value或checked属性，让React完全控制组件状态，避免非受控组件的异常行为。
• 类型适配：针对数组、数字、布尔等不同类型字段做针对性处理，避免类型不匹配错误。

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