如何停止含useState的逻辑自动执行，仅按需触发GET请求与重渲染

问题根源 #

你当前的axios.get请求直接写在了组件顶层逻辑中，React组件每次渲染都会从头执行所有顶层代码，请求成功后调用setDataArray更新状态又会触发组件重新渲染，因此形成了渲染→发起请求→更新状态→重新渲染的死循环，才会持续向服务器发送GET请求。

解决方案 #

把请求逻辑封装成独立函数，仅在需要触发请求的场景（比如按钮点击、特定回调）下调用即可，useState本身完全可以用来存储接口返回数据，无需替换，修改后的代码示例如下：

import axios from 'axios';
import { useState } from 'react';

const baseURL = 'http://localhost:5000/api/user/timesheet/13009';

function YourComponent() {
  const [dataArray, setDataArray] = useState([]);

  // 把请求封装成独立函数
  const fetchTimeSheetData = () => {
    axios.get(baseURL).then((response) => {
      setDataArray(response.data);
    });
  };

  return (
    <div>
      {/* 点击按钮时才触发请求 */}
      <button onClick={fetchTimeSheetData}>获取考勤数据</button>
      {/* 其他使用dataArray的逻辑 */}
    </div>
  );
}

拓展说明 #

• 如果仅在当前组件内使用返回数据，useState是最简洁合适的存储方式；如果需要在多个跨层级/无关联组件中共享这份数据，可以选择useContext、Zustand、Redux等状态管理方案。
• 如果需要组件首次挂载时就请求一次数据，之后仅手动触发刷新，可以配合useEffect加空依赖实现首次调用：

useEffect(() => {
  fetchTimeSheetData();
}, []);

这样首次挂载后自动请求一次，之后只有你主动调用fetchTimeSheetData时才会重新发请求更新数据。

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