React中如何为下拉选择框（Select）设置默认值？

你遇到的问题核心是state更新的异步性，以及初始化时数据未加载导致的undefined。以下是正确的实现方案：

关键修改点 #

1. 在获取API数据后直接从返回结果中提取默认值，无需等待companies state更新
2. 给select组件绑定value属性，确保选中状态与selectedCompanyId同步

修改后的完整代码 #

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [companies, setCompanies] = useState([]);
  const [selectedCompanyId, setSelectedCompanyId] = useState('');
  const [noCompanyFound, setNoCompanyFound] = useState(false);

  const getCompanies = async () => {
    const response = await getMyCompanies();
    
    if(response.data.status === 200) {            
      if(response.data.companies.length === 0) {
        setNoCompanyFound(true);
        setSelectedCompanyId(''); // 空数据时重置选中值
      } else {
        const fetchedCompanies = response.data.companies;
        setCompanies(fetchedCompanies); 
        setNoCompanyFound(false);
        // 直接从接口返回的数据中取第一个公司ID设置默认值
        setSelectedCompanyId(fetchedCompanies[0].id);                                         
      }                                         
    }
  };

  const handleChangeCompany = (event) => {
    setSelectedCompanyId(event.target.value);        
  };

  useEffect(() => {
    getCompanies();
  }, []);

  return (
    <div>
      {noCompanyFound ? (
        <p>暂无公司数据</p>
      ) : (
        <select value={selectedCompanyId} onChange={handleChangeCompany}>
          {companies.map(company => (
            <option key={company.id} value={company.id}>
              {company.name}
            </option>
          ))}
        </select>
      )}
    </div>
  );
};

export default YourComponent;

为什么之前的方法无效？ #

• 直接在useState初始化时用companies[0].id：此时companies是空数组，companies[0]为undefined，无法读取id
• 在useEffect里调用setSelectedCompanyId(companies[0].id)：setCompanies是异步操作，调用后companies不会立即更新，此时仍为空数组，同样取不到值

额外注意事项 #

• 给option添加key属性，符合React列表渲染规范
• 处理空数据的边界情况，避免出现无意义的空下拉框

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