使用react-select实现下拉搜索栏失败问题排查求助

你的代码主要违反了React Hooks的使用规则，同时组件外部的异步操作处理也存在逻辑问题，我来一步步拆解问题并给出修复方案：

核心问题点 #

1. Hooks只能在函数组件或自定义Hook中调用
   你把useState和useEffect放在了普通函数FetchPokemonNames里，而且这个函数没有遵循自定义Hook的命名规范（必须以use开头）。React会判定非Hook函数内的Hooks调用为非法操作，这就是你看到Invalid hook call警告的直接原因。

2. 组件外部不能直接用await获取数据
   你在组件定义外部执行const options = await FetchPokemonNames();，这不仅会导致代码执行时序混乱（组件渲染时数据还未获取完成），而且这种写法本身就不符合React的组件生命周期逻辑。

修复后的代码 #

我们把数据获取改成符合规范的自定义Hook，再在组件内部调用它来管理数据：

import React, { useState , useEffect } from 'react';
import Select from 'react-select';

// 自定义Hook：必须以use开头，内部可合法使用Hooks
function useFetchPokemonNames() {
  const [pokemonNames, setPokemonNames] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const res = await fetch("http://localhost:3001/pokemonNames");
        const data = await res.json();
        setPokemonNames(data);
      } catch (err) {
        console.error("获取宝可梦名称失败:", err);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  return { pokemonNames, loading };
}

export default function SearchBar() {
  const [selectedOption, setSelectedOption] = useState(null);
  // 在组件内部使用自定义Hook获取数据
  const { pokemonNames, loading } = useFetchPokemonNames();

  // 加载状态下显示占位内容，避免空数据渲染问题
  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div className="App">
      <Select 
        defaultValue={selectedOption} 
        onChange={setSelectedOption} 
        options={pokemonNames} 
        placeholder="搜索宝可梦..."
      />
    </div>
  );
}

关键修复说明 #

• 自定义Hook命名规范：将FetchPokemonNames改为useFetchPokemonNames，符合React对自定义Hook的命名要求，让React识别这是合法的Hook容器。
• 组件内部管理数据：把数据获取逻辑移到组件内部的Hook中，确保数据在组件生命周期内正确加载、更新。
• 加载状态处理：新增loading状态，避免数据未返回时给Select传递空值或null，提升用户体验。
• 异常捕获：添加try/catch捕获请求异常，方便调试和处理网络错误场景。

这样修改后，你的下拉搜索栏就能正常工作，同时完全符合React的开发规范。

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