React电商产品页动态选项数组优化：仅保留各选项最新选择值

当前代码的问题在于，每次触发onChange时只是将选中值追加到数组中，没有区分选项类型，导致同一类型的多次选择会在数组中留下多个旧值。要实现每个选项类型仅保留最新选中值的需求，我们可以通过以下方式修改：

1. 调整状态存储结构 #

将原来的数组类型状态改为对象类型，用选项类型（如"尺寸""颜色"）作为键，选中值作为值，这样可以直接关联类型与对应选中值，便于更新。

// 初始化状态为空对象
const [selectedOptions, setSelectedOptions] = useState({});

2. 修改JSX中的select组件 #

为onChange事件传递当前选项的类型，同时给列表元素加上key（符合React列表渲染规范）：

<div className='mt-4'>
  {item.options.length > 0
    ? item.options.map((option) => (
      <div key={option.name}>
        <p>{option.name}</p>
        <select 
          className='rounded-md border-2 w-32 h-12' 
          onChange={(e) => handleAddOptions(e, option.name)}
          defaultValue={selectedOptions[option.name]} {/* 保持选中状态，可选 */}
        >
          {option.values.map((val) => (
            <option key={val} value={val}>{val}</option>
          ))}
        </select>
      </div>
    ))
    : ''}
</div>

3. 更新事件处理函数 #

修改handleAddOptions，根据选项类型覆盖对应的值，而不是追加：

const handleAddOptions = (e, optionType) => {
  const selectedValue = e.target.value;
  // 解构之前的状态，替换当前类型的选中值
  setSelectedOptions(prevState => ({
    ...prevState,
    [optionType]: selectedValue
  }));
};

4. 按需转换为数组格式 #

如果业务逻辑需要最终输出数组（比如提交接口），可以通过Object.values()从对象中提取所有最新选中值：

// 获取每个选项类型的最新值数组
const finalOptionsArray = Object.values(selectedOptions);

这样修改后，无论用户如何更改选项，每个类型只会保留最新的选中值。例如用户先选small（尺寸）和blue（颜色），再将尺寸改为medium，selectedOptions会是{尺寸: 'medium', 颜色: 'blue'}，对应的数组为['medium', 'blue']，完全符合需求。

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