React Hooks状态初始值设置：API加载前下拉框默认值问题

针对你遇到的API请求完成前无法设置初始值导致下拉框为空的问题，有两种常用解决方案：

方案一：数据加载完成后设置初始值（强制默认选中第一个选项） #

通过加载状态控制组件渲染，等API返回数据后再设置初始值为第一个选项的ID，同时避免加载时的空状态：

const [selectionValue, setSelectionValue] = useState(null);
const [apidata, setApidata] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [isSelectOpen, setIsSelectOpen] = useState(false);

// 模拟API请求逻辑
useEffect(() => {
  fetch('/your-api-url')
    .then(res => res.json())
    .then(data => {
      setApidata(data);
      // 数据返回后设置第一个选项为初始值
      if (data.length > 0) {
        setSelectionValue(data[0].rID);
      }
      setIsLoading(false);
    })
    .catch(err => {
      console.error('API请求失败:', err);
      setIsLoading(false);
    });
}, []);

const handleSelectionChange = (value) => {
  setSelectionValue(value);
}

// 加载状态下显示占位内容
if (isLoading) {
  return <div>加载中...</div>;
}

return (
  <Select 
    isOpen={isSelectOpen}
    onOpenChange={setIsSelectOpen}
    value={selectionValue}
    onValueChange={handleSelectionChange}>
      {apidata.map(optionItem => (
        <SelectOption key={optionItem.rID} value={optionItem.rID}>
          {optionItem.rID}
        </SelectOption>
      ))}
  </Select>
);

方案二：添加默认占位选项（允许用户选择空值） #

如果业务允许用户未选中任何选项，可以添加一个提示性的默认选项，初始值设为空字符串或特定标识：

const [selectionValue, setSelectionValue] = useState("");
const [isSelectOpen, setIsSelectOpen] = useState(false);

const handleSelectionChange = (value) => {
  setSelectionValue(value);
}

return (
  <Select 
    isOpen={isSelectOpen}
    onOpenChange={setIsSelectOpen}
    value={selectionValue}
    onValueChange={handleSelectionChange}>
      {/* 默认占位选项 */}
      <SelectOption key="default" value="">请选择ID</SelectOption>
      {apidata.map(optionItem => (
        <SelectOption key={optionItem.rID} value={optionItem.rID}>
          {optionItem.rID}
        </SelectOption>
      ))}
  </Select>
);

方案选择建议 #

• 若业务要求必须默认选中第一个选项，优先使用方案一，确保数据加载完成后再渲染下拉框并设置初始值
• 若允许用户自主选择是否选中选项，或需要提示用户进行选择，使用方案二更合适

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