Autoselect下拉框useEffect不生效问题求助

两种方案的问题根源 #

1. 依赖数组设为category导致无限请求 #

当你把category放进useEffect的依赖数组时，每次调用setCategory(data)都会生成新的数组引用（哪怕数组内容和之前完全一致），React会判定依赖项发生变化，进而再次触发useEffect。这就形成了死循环：useEffect执行→调用接口→更新category→useEffect再次执行，最终导致接口被无限调用。

2. 依赖数组设为category.length不触发更新 #

这种写法的问题在于，useEffect只会在category.length变化时执行，但你没有在新分类保存成功后主动触发分类列表的重新拉取。组件挂载时length从0变为实际数据长度，useEffect执行一次后就不再触发；而保存新分类的操作本身不会自动触发fetchCategoryList，category状态不更新，length也不会变化，自然不会触发useEffect。

正确的解决方案 #

核心逻辑是：在新分类保存成功的回调里主动调用分类列表接口，而非依赖useEffect的被动触发。同时在组件挂载时初始化加载一次分类数据：

const [category, setCategory] = useState([]);

// 组件挂载时初始化加载分类列表
useEffect(() => {
  const fetchCategoryList = async () => {
    const data = await categoryApi.getAllDD();
    setCategory(data);
  };
  fetchCategoryList();
}, []); // 空依赖数组，仅组件挂载时执行一次

// 保存新分类的示例函数
const handleSaveCategory = async (newCategoryData) => {
  try {
    // 调用保存分类的接口
    await categoryApi.save(newCategoryData);
    // 保存成功后立即拉取最新分类列表
    const updatedCategories = await categoryApi.getAllDD();
    setCategory(updatedCategories);
  } catch (err) {
    console.error('保存分类失败:', err);
  }
};

这样，新分类保存成功后会立刻更新category状态，Autocomplete组件会自动读取新的options值重新渲染，展示新增的分类。你的Autocomplete组件配置本身没有问题，只要category状态更新，就能正常渲染新数据。

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