Select组件值无法更新求助：选择后始终显示weekly

核心问题 #

你的状态更新逻辑存在两个关键错误：

1. 处理subscriptionDuration时，错误地将value.value硬赋值为'weekly'，导致无论选择哪个选项，状态都会被强制设为weekly，完全忽略了用户的选择。
2. 同时使用动态属性[value.name]和显式的subscriptionDuration字段，当操作订阅时长字段时，显式字段会覆盖动态属性的赋值，逻辑完全冲突。

修正后的状态更新逻辑 #

改用通用的表单字段处理逻辑，无需针对每个字段写单独判断，简洁且不易出错：

setFoodTemplateDetails((prevDetails) => {
  let newValue = value.value;
  // 仅对description字段做toString转换
  if (value.name === 'description') {
    newValue = newValue.toString();
  }
  return {
    ...prevDetails,
    [value.name]: newValue
  };
});

额外优化：绑定组件与状态的同步 #

为确保Select组件的显示值和状态完全同步，需要给Select添加value属性，绑定当前状态值：

<Select 
  name='subscriptionDuration' 
  onChange={handleInputChange}
  value={foodTemplateDetails.subscriptionDuration}
>
  <option value={'weekly'}>Weekly</option>
  <option value={'monthly'}>Monthly</option>
</Select>

改动说明 #

1. 通用动态属性赋值逻辑，适配所有表单字段，避免重复代码。
2. 仅在必要时（description字段）处理值的类型，其他字段直接使用用户选择的原始值。
3. 给Select绑定value属性，这是受控组件的标准写法，确保UI显示与状态完全一致。

内容的提问来源于stack exchange，提问作者Olaoluwa Anigboro-Napoleon