Question

我一直在我的 React 项目中使用 axios（我是初学者）

不幸的是，我的 API 请求似乎循环了......我已经阅读了许多其他帖子，但我无法想出一个解决方案来解释为什么会发生这种情况，我已经阅读了关于 e.preventDefault() 但我没有管理让它发挥作用

SELECT W.FullName AS [Full Name], W.Phone, W.Address, W.Age, J.Salary, J.Job
FROM Departments, Jobs AS J INNER JOIN Workers AS W ON J.JobID = W.JobID
WHERE J.Salary > 15000 AND Departments.Building Like 'A#'
GROUP BY W.FullName, W.Phone, W.Address, W.Age, J.Salary, J.Job
ORDER BY J.Salary

我知道 genUrl 会永远运行，但我希望它仅在 getLimitsFromGen 更改（即路由更改）时运行

  const [state, set_state] = useState([]);

  useEffect(() => {
    async function fetch() {
      const res = await axios.get(`${genUrl()}`);
      set_state(res.data);
    }
    fetch();
  },[state.results]);
  const fetchedData = state.results;

说我真的不知道我在做什么所以我可能完全错了

感谢您的帮助

Answer 1

是的，它会循环，因为您向 useEffect 的依赖项数组传递了一个参数，因此当 state.result 更改时 useEffect 再次调用 fetch

  const [state, set_state] = useState([]);

  useEffect(() => {
   let mounted =true 

    async function fetch() {
      const res = await axios.get(`${genUrl()}`);
      if(mounted ){
           set_state(res.data);
      }
     
    }
    fetch();

    //this is for cleaning up use effect to prevent updating state when component is unmounted
    return ()=>mounted =false
  },[]);
  const fetchedData = state.results;

Answer 2

useEffect 钩子中的依赖值是更新循环的原因。一旦你设置了状态，它就会触发一个更新，它也会再次触发获取和设置状态。如果 getLimitsFromGen(validGeneration) 不是异步函数，您可以将 getUrl 的返回值设置为您的依赖项。阅读有关如何使用 useEffect here 的更多信息。还可以尝试将您的 fetch() 函数重命名为更具体的内容，正如已经提到的 fetch 是一个内置的 js 函数

 const [state, set_state] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const res = await axios.get(`${genUrl()}`);
      set_state(res.data);
    }
    fetchData();
  },[genUrl()]);
  const fetchedData = state.results;

AXIOS GET 请求循环反应

2 个答案: