React使用useEffect搭配axios请求Spring Boot接口触发无限循环怎么解决？

云上老周

2026-10-19

问题根因

你写的useEffect没有传入第二个参数（依赖数组），默认会在每次组件渲染完成后都重新执行回调逻辑。回调内调用setCompanies更新状态会触发组件重渲染，重渲染后又会再次执行useEffect发请求，由此形成无限循环，才会出现服务端持续收到请求、控制台无限打印的现象。

修复方案

给useEffect添加空依赖数组[]即可，空依赖数组代表该副作用仅在组件首次挂载完成后执行1次，不会重复触发：

const [filterKeywords, setfilterKeywords] = useState([]);
const [companies, setCompanies] = useState([]);
useEffect(() => {
    axios.get(`/api/users/allCompanies`)
        .then(res => {
            setCompanies(res.data);
        })
}, []); // 新增空依赖数组

补充优化建议

可以给请求增加错误捕获逻辑，避免请求异常时无提示、状态不更新的问题：

useEffect(() => {
    axios.get(`/api/users/allCompanies`)
        .then(res => {
            setCompanies(res.data);
        })
        .catch(err => {
            console.error('拉取公司列表失败:', err);
        })
}, []);