React Select组件中defaultValue不生效的原因排查

这是因为defaultValue仅在组件首次挂载时生效，你的组件初始化时employees是空数组，此时渲染的是值为空字符串的<option value={''}>Loading...</option>。当异步请求完成、employees更新后，组件重新渲染出完整的选项列表，但此时defaultValue不会再次触发生效，浏览器会自动选中新渲染出的第一个选项，导致你设置的defaultId失效。

方案1：等待数据加载完成后再渲染正式选项 #

避免初始空值option的干扰，确保defaultId对应的选项存在时再渲染完整列表：

const EmployeeDropdown = ({ handleEmployeeChange, defaultId }) => {
  const [employees, setEmployees] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 替换为实际异步请求逻辑
    const fetchEmployees = async () => {
      const data = await fetch('/api/employees').then(res => res.json());
      setEmployees(data);
      setIsLoading(false);
    };
    fetchEmployees();
  }, []);

  return (
    <Select
      onChange={handleEmployeeChange}
      defaultValue={defaultId}
    >
      {isLoading ? (
        <option value={''}>Loading...</option>
      ) : (
        employees.map(person => (
          <option
            value={person.id}
            key={person.id}
          >
            {person.name}
          </option>
        ))
      )}
    </Select>
  );
};

方案2：通过key强制组件重新挂载 #

当employees或defaultId变化时，给Select组件设置唯一key，让React重新创建组件实例，从而重新应用defaultValue：

return (
  <Select
    onChange={handleEmployeeChange}
    defaultValue={defaultId}
    // 当数据加载完成或defaultId变化时，强制组件重新挂载
    key={`employee-select-${employees.length}-${defaultId}`}
  >
    {employees.length > 0 ? (
      employees.map(person => (
        <option
          value={person.id}
          key={person.id}
        >
          {person.name}
        </option>
      ))
    ) : (
      <option value={''}>Loading...</option>
    )}
  </Select>
);

方案3：使用ref手动设置选中值（特殊场景可选） #

如果以上方案不适用，可通过ref在数据加载完成后手动设置选中状态：

const EmployeeDropdown = ({ handleEmployeeChange, defaultId }) => {
  const [employees, setEmployees] = useState([]);
  const selectRef = useRef(null);

  useEffect(() => {
    const fetchEmployees = async () => {
      const data = await fetch('/api/employees').then(res => res.json());
      setEmployees(data);
      // 数据加载完成后手动赋值
      if (selectRef.current && defaultId) {
        selectRef.current.value = defaultId;
      }
    };
    fetchEmployees();
  }, [defaultId]);

  return (
    <Select
      ref={selectRef}
      onChange={handleEmployeeChange}
      defaultValue={defaultId}
    >
      {employees.length > 0 ? (
        employees.map(person => (
          <option
            value={person.id}
            key={person.id}
          >
            {person.name}
          </option>
        ))
      ) : (
        <option value={''}>Loading...</option>
      )}
    </Select>
  );
};

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