The React's select component value does not change in the UI (the data fetched from C# API)

在React前端开发中，表单控件的状态同步一直是开发者必须谨慎处理的细节。近日，不少技术人员在论坛中反映一个典型问题：使用React的<select>组件时，从后端C# API异步获取数据后，虽然控制台打印的值已正确更新，但UI下拉框显示的内容却始终不变。这一现象在涉及动态加载选项或默认选中值的场景中尤为突出，严重影响了用户体验。

问题复现：数据已到，视图“不动”

开发者小张在构建一个报表工具时，需要从ASP.NET Core API获取一个部门列表，并默认选中当前用户所属部门。其实现逻辑大致如下：

const [deptId, setDeptId] = useState(null);
const [depts, setDepts] = useState([]);

useEffect(() => {
  fetch('/api/departments')
    .then(res => res.json())
    .then(data => {
      setDepts(data.list);
      setDeptId(data.defaultDeptId); // 假设API返回默认id
    });
}, []);

return (
  <select value={deptId} onChange={e => setDeptId(e.target.value)}>
    {depts.map(d => <option key={d.id} value={d.id}>{d.name}</option>)}
  </select>
);

经测试，deptId和depts状态在useEffect中均正确更新（通过console.log可见），但页面上的<select>仍然显示空白或旧的占位值。反复触发setDeptId也无济于事，UI似乎“卡死”在初始状态。

根源探析：不可变性与异步更新陷阱

经过社区多位资深开发者分析，问题极可能出在 React对状态更新的批处理机制 与 非受控组件残留值 的交互上。具体原因有三：

1. 同步setState导致的“空选项”短路

在useEffect中连续调用setDepts和setDeptId时，React在异步回调中会将它们合并为一次渲染。如果depts的初始值为[]，而deptId初始为null，那么第一次渲染时<select>的选项列表为空，但value={null}在原生HTML中会导致select显示空白（因无匹配选项）。当异步数据到达并重新渲染时，React可能认为value与第一个渲染结果不匹配，但浏览器原生select组件会记住上一次选中的索引——如果没有任何option被选中过，它可能保留空白状态。

2. key值不唯一或变化导致组件“复用”

另一个常见原因是：<option>的key属性使用了不稳定的值（例如索引index）。当API返回的数据顺序改变时，React可能复用DOM节点，导致旧的值被保留。本例中虽然使用了d.id，但如果后端的id字段为0或字符串数字类型混淆，仍可能引发问题。

3. 受控组件与非受控组件的冲突

若value属性在第一次渲染时为undefined而非null，React会认为这是一个非受控组件，之后即使设置为具体值也不会改变UI。常见的坑是：setDeptId在初始化时未传入有效值，导致deptId为undefined，而后才变为数字。

解决方案：三步定位与修复

针对上述根因，开发者可采取以下措施：

第一步：确保初始值有效

在状态定义时，不要使用null，而是使用一个明确的空字符串或默认占位值：

const [deptId, setDeptId] = useState('');

并在<select>中增加一个默认占位<option value="">请选择</option>，以保证UI始终有选中项。

第二步：分步更新状态或使用useEffect依赖

如果不希望在数据未加载时渲染select，可以增加条件渲染：

if (depts.length === 0) return <div>Loading...</div>;
return ( ...

更彻底的方案是：将setDeptId放入第二个useEffect中，仅当depts加载完成后才设置默认值：

useEffect(() => {
  if (depts.length > 0 && deptId === '') {
    setDeptId(depts[0].id);
  }
}, [depts]);

第三步：检查数据不可变性

确保从API返回的数据是全新的对象，避免直接修改原state。使用setDepts([...data.list])可以强制触发重新渲染。

附加建议：使用key强制重新挂载

如果以上均无效，可以给<select>添加一个key属性，使其在数据变化时完全重建：

<select key={depts.length} value={deptId} onChange={...}>

专家观点：异步数据流最佳实践

资深React技术顾问李浩表示：“这个问题本质上是React状态生命周期与原生DOM控件之间的协调问题。前端开发者应该养成‘数据驱动UI’的习惯，避免依赖组件内部状态。对于C#后端返回的数据，建议在API层就规范化返回格式，确保id字段为字符串或数字且不为空；前端则使用useReducer或react-query等库管理异步数据，减少手动同步的复杂性。”

结语

从C# API获取数据后React select组件UI不更新，看似是小概率Bug，实则折射出React受控组件的核心原理——值必须与选项列表完全同步。通过合理初始化、分离异步更新逻辑、保证数据不可变，这一“顽疾”便可迎刃而解。随着React 18并发特性的普及，未来这类问题将越来越少，但理解底层的状态批处理机制，依然是每位React开发者的必修课。

The React&#39;s select component value does not change in the UI (the data fetched from C# API)