时间戳

首页 > 解决方案 > React Rest Call Infinite Loop 使用 Hooks

reactjs - React Rest Call Infinite Loop 使用 Hooks

问题描述

我注意到我的组件陷入了无限循环。它一直在打同样的休息电话。

据我了解，useEffect钩子的工作方式类似于 ComponentRender 和 ComponentUpdate 生命周期函数。

另外，我认为正在发生的事情是这样但无法修复它：

在渲染 -> API 调用 -> 更新错误状态 -> 组件更新 -> UseEffect Hooked 再次调用

你能帮助我吗？

import React, { useState, useEffect } from "react";
import "./ResultsPage.css";
import Error from "../components/Error";

function Homepage() {
  let username = "test";

  const [error, setError] = useState({ exists: false, value: null });
  const [userData, setUserData] = useState(null);

  const getUsernameData = () => {
    fetch(`testAPI/${username}`)
      .then((response) => {
        if (response.status === 404) {
          return setError({ exists: true, value: response.status });
        }
        return response.json();
      })
      .then((json) => setUserData(json))
      .catch((error) => {
        setError({ active: true, type: 400 });
      });
  };
  useEffect(() => {
    getUsernameData();
  });

  return (
    <div className="Homepage">
      {error.exists && <Error error={error} username={username} />}
      {!error.exists && <h1>Error does not exist</h1>}
    </div>
  );
}

export default Homepage;

标签： reactjsreact-hooks

解决方案

useEffect除非您另有说明，否则将在每个渲染上运行。您的效果没有依赖数组，因此它运行每个渲染，触发重新渲染，然后无限重新开始。

您可以useEffect通过给它一个空数组来告诉它只在挂载上运行一次：

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

您还可以告诉它仅在某些事情发生变化时运行。通过将变量添加到依赖数组来做到这一点：

useEffect(() => {
  getUsernameData();
}, [variable_to_depend_on]);

推荐阅读