使用react-select遇初始值为空问题：如何避免选中空白？

我想在代码中使用react-select，但console.log(testUsers)起初为空，后续才返回数据，然而选择器始终显示空白。请问有没有办法避免选中空白？

我的代码：

const { request: getUser, isLoading } = useRequest("");
const [testUsers, setUsers] = useState("");

useEffect(() => {
  getUser({
    path: `${someapi}/user?id=${record?.user_uid}`,
    overwritePath: true,
  }).then((data: any) => {
    setUsers(data[0].fullname);
  });
}, [testUsers]);

console.log(testUsers, "/////////////////");

控制台输出：

/////////
////////
////////
some api returns /////////////

1. 修复 useEffect 无限循环问题 #

你的useEffect依赖项写了testUsers，但回调里又调用setUsers更新它，这会导致组件无限重渲染，同时多次发起不必要的请求。把依赖项换成正确的触发条件：

• 若需在record?.user_uid变化时重新请求，依赖项设为[record?.user_uid]
• 若仅在组件挂载时请求一次，依赖项设为空数组[]

修改后的useEffect：

useEffect(() => {
  if (!record?.user_uid) return; // 避免无意义的请求
  getUser({
    path: `${someapi}/user?id=${record?.user_uid}`,
    overwritePath: true,
  }).then((data: any) => {
    if (data?.length > 0) { // 防止数据为空时报错
      setUsers(data[0].fullname);
    }
  });
}, [record?.user_uid]);

2. 处理初始状态与加载状态 #

react-select若初始值为空字符串，容易显示空白。可以：

• 把useState初始值设为null或占位文本（比如"加载中..."）
• 利用isLoading状态给选择器加加载提示，或禁用选择器直到数据加载完成

示例：

const [testUsers, setUsers] = useState<string | null>(null);

// react-select组件配置
<Select
  value={testUsers ? { label: testUsers, value: testUsers } : null}
  isDisabled={isLoading}
  placeholder={isLoading ? "加载中..." : "请选择"}
  // 其他配置项...
/>

3. 适配react-select的数据格式要求 #

react-select的选项通常需要{ label: string, value: any }结构，直接传入fullname可能无法正确识别。获取数据时可以转换格式：

.then((data: any) => {
  if (data?.length > 0) {
    const userOption = { label: data[0].fullname, value: data[0].user_uid };
    setUsers(userOption);
  }
});

这样选择器就能正确渲染选项，不会出现空白。

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