React组件中axios.get()网络请求被多次执行问题求助

核心原因 #

• useEffect未指定依赖数组：你当前使用的useEffect没有传入第二个参数（依赖数组），这会导致每次组件渲染完成后都会重新执行useEffect内部逻辑。而你在useEffect中调用了状态更新函数getCaskList，状态更新会触发组件重新渲染，形成「渲染→执行useEffect发请求→更新状态→重新渲染」的死循环，因此axios.get会被反复触发。
• 组件函数体直接调用状态更新函数：你在组件return之前直接执行了setSearchResultCaskName(result)，组件每次渲染都会运行这行代码，状态更新又会触发新一轮渲染，进一步加剧了死循环。

修复方案 #

1. 给useEffect添加空依赖数组[]，让它仅在组件首次挂载完成后执行一次，符合拉取全量列表的需求：

useEffect(()=>{
    const func = async() =>{
        const resultCasks = await axios.get('http://localhost:3001/getAllApps');
        const actualData = resultCasks.data;
        console.log("**********************" + actualData);
        getCaskList(actualData);
    }
    func();
}, []) // 新增空依赖数组

2. 把搜索相关的逻辑抽离到单独的useEffect中，仅当casklist或searchCaskName变化时才重新执行搜索，避免无效的状态更新：

// 移除原组件函数体中直接写的fuse初始化、搜索、setSearchResultCaskName逻辑，替换为以下代码
useEffect(() => {
    // casklist为空时跳过无意义搜索
    if (!casklist.length) return
    const options = {
        includeScore: false,
        findAllMatches : true,
        threshold : 0.3
    };
    const fuse = new Fuse(casklist,options);
    const result = fuse.search(searchCaskName);
    setSearchResultCaskName(result);
}, [casklist, searchCaskName])

其他优化建议 #

• casklist是数组类型，useState初始值建议设置为[]而非空字符串，避免类型不一致引发的潜在问题
• 状态更新函数命名建议对齐语义，比如getCaskList实际是更新casklist的方法，建议改成setCaskList，降低理解成本
• 列表渲染的<Cask>组件需要添加唯一key属性，避免React抛出性能警告

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