React中设置API返回的第一个值为react-select默认值不生效如何解决

问题原因 #

defaultValue 是react-select的非受控属性，仅在组件首次挂载渲染时读取一次，后续更新不会生效。你首次渲染时接口还未返回，state为undefined，defaultValue初始就被设为空，接口返回数据后组件不会再重新读取该属性，因此默认值不显示。

解决方案 #

方案1：使用受控模式（推荐）

绑定value和onChange属性，手动控制选中值的更新，适配所有需要后续操作选中值的场景。
修改后代码如下：

import "./styles.css";
import Select from 'react-select'
import { useState, useEffect } from "react";
export default function App() {
  const [options, setOptions] = useState([]);
  const [selectedVal, setSelectedVal] = useState(null);
 
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(json => {
      const optionList = json?.map(i => ({label: i.name, value: i.name})) || []
      setOptions(optionList)
      setSelectedVal(optionList[0]) // 接口返回后直接设置默认选中值
    })
  },[])

  return (
    <div className="App">
      <Select
        value={selectedVal}
        onChange={setSelectedVal}
        options={options} 
      /> 
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

方案2：延迟渲染组件

等接口返回选项数据后再渲染Select组件，保证首次渲染时defaultValue已有值，适合不需要额外处理选中值的简单场景。
仅需修改渲染逻辑：

return (
  <div className="App">
    {/* 选项加载完成后再渲染组件 */}
    {options.length > 0 && <Select
      defaultValue={options[0]}
      options={options} 
    />}
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>
  </div>
)

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