React Chakra UI Select选中后界面标签不更新但状态已变更

问题核心原因 #

你的代码里存在几个关键问题导致界面不同步：

• 对象作为Select的value无效：原生HTML的<option>仅支持字符串/数字作为value值，直接传对象会被自动转成"[object Object]"，Chakra UI的Select基于原生组件，同样受此限制。而且React对比对象时依赖引用地址，即使内容一致，引用不同也会判定为状态未变化，导致界面不更新。
• 状态结构前后不一致：初始taxSelect是包含lable（注意拼写错误，应为label）的完整对象，但handleTaxSelect中设置的是selectedTaxconfig（即ele.value），与初始状态结构不匹配。
• 依赖selectedIndex的逻辑不可靠：通过selectedIndex -1获取选项容易出错，比如当Select包含placeholder时，索引计算会混乱。

修复后的代码示例 #

1. 修正拼写错误（lable→label）

class TaxClass{
  constructor () {
    this.taxes = [
      {
        label:"18% GST",
        value:{value:18, valueType:"PERCENT",formLabel:"18 %", taxType:"GST"},
      },
      {
        label:"No TAX",
        value:{value:0, valueType:"ABSOLUTE",formLabel:"0.0", taxType:"SIMPLE"},
      }
    ] 
  }
}

2. 改用基本类型作为选中标识

将状态改为存储选中tax项的唯一数字标识（比如value.value），基本类型的比较更可靠：

const taxObj = new TaxClass();
const taxes = taxObj.taxes;
// 初始选中"No TAX"对应的value值0
const [selectedTaxValue, setSelectedTaxValue] = useState(0);

const handleTaxSelect = (e) => {
  const selectedValue = parseInt(e.target.value);
  // 通过标识找到对应的tax配置
  const selectedTaxConfig = taxes.find(tax => tax.value.value === selectedValue).value;
  
  const localInvoice = cloneDeep(invoiceObject);
  localInvoice.selectedTaxProfile = selectedTaxConfig;
  localInvoice.recalculateAllInvoiceValues();
  
  setSelectedTaxValue(selectedValue);
  setInvoiceObject(localInvoice);
}

3. 调整Select组件的渲染逻辑

给每个<option>的value设置为数字标识，并通过selectedTaxValue匹配选中项：

<Select 
  name="taxselect" 
  value={selectedTaxValue} 
  onChange={handleTaxSelect} 
  placeholder='Select option'
>
  {taxes.map((ele) => (
    <option key={ele.label} value={ele.value.value}>
      {ele.label}
    </option>
  ))}
</Select>

备选方案（若需存储完整对象） #

如果必须以完整对象作为状态，可以给每个tax项添加唯一ID，用ID作为Select的value值，渲染时通过ID匹配对应的对象。但这种方式不如基本类型稳定，推荐优先使用基本类型作为选中标识。

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