React/HTML select组件默认值不生效问题求助

问题排查分析 #

1. 数据加载时机不匹配 #

第一个select依赖的projectStatuses可能在组件挂载时还未完全加载：

• 组件首次渲染时，若projectStatuses是空数组或不包含task.SubStatus.Id对应的选项，React会自动选中第一个选项；即便后续projectStatuses加载完成，defaultValue仅在组件挂载时生效，不会重新触发选中逻辑。
• 第二个组件的employees数据可能在组件挂载前就已就绪，defaultValue能直接匹配到对应选项，因此始终正常工作。

2. 类型不匹配问题 #

option的value属性会被强制转换为字符串类型，若task.SubStatus.Id是数字类型，而status.Id存在类型差异（比如后端返回为字符串），会导致匹配失败：

• 例如task.SubStatus.Id是数字4，option的value是字符串"4"，此时defaultValue={4}与value="4"不会被React判定为相等，无法选中目标选项，最终 fallback 到第一个选项。
• 第二个组件中task.AsigneeId和Employee.EmployeeID的类型完全一致（同数字或同字符串），因此匹配始终成功。

3. task.SubStatus的初始化状态问题 #

如果task对象是异步获取的，初始时task.SubStatus可能为undefined或null：

• 组件首次渲染时defaultValue={undefined}，React会选中第一个选项；后续task.SubStatus加载完成后，defaultValue不会自动更新（它仅作为挂载时的初始值），导致选中状态无法同步。
• 而task.AsigneeId初始可能有有效默认值（或employees中存在对应选项），因此不受影响。

解决方案建议 #

• 条件渲染确保数据就绪：通过判断projectStatuses长度，避免在数据未加载时渲染select：

  {projectStatuses.length > 0 && (
    <select
      className="p-select-input"
      id="Substatus"
      defaultValue={task.SubStatus.Id}
    >
      {projectStatuses.map((status) => (
        <option key={status.Id} value={status.Id}>
          {status.StatusName}
        </option>
      ))}
    </select>
  )}
  

• 统一类型匹配：将defaultValue和option的value统一为相同类型，比如转成字符串：

  defaultValue={String(task.SubStatus.Id)}
  

• 改用受控组件（推荐）：若需要动态更新选中值，用value替代defaultValue，配合状态管理实现同步：

  const [selectedSubStatus, setSelectedSubStatus] = useState(task?.SubStatus?.Id);
  
  useEffect(() => {
    if (task?.SubStatus?.Id) {
      setSelectedSubStatus(task.SubStatus.Id);
    }
  }, [task]);
  
  <select
    className="p-select-input"
    id="Substatus"
    value={selectedSubStatus}
    onChange={(e) => setSelectedSubStatus(e.target.value)}
  >
    {projectStatuses.map((status) => (
      <option key={status.Id} value={status.Id}>
        {status.StatusName}
      </option>
    ))}
  </select>
  

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