Json-server GET 请求不断触发

Posted 2023-03-27

【中文标题】Json-server GET 请求不断触发

【英文标题】：Json-sever GET requests keep firing

【发布时间】：2021-06-04 05:16:12

【问题描述】：

我已经在我的机器上本地设置了一个 json-server，用作我正在创建的应用程序的模拟 API。我在端口 3004 上运行服务器，而我的应用程序在端口 3000 上运行。应用程序按预期运行；但是，在检查运行服务器的终端时，我注意到 GET 请求每毫秒不断被调用 - 见下图：

这是正常行为吗？根据下面的代码，我希望 GET 请求只被调用一次。 GET 请求是 React 应用程序的一部分，在 useEffect 内部调用。

useEffect(() => 
    fetch('http://localhost:3004/invoices',
        
            headers :  
                'Content-Type': 'application/json',
                'Accept': 'application/json'
        ,
    
    )
    .then(function(response)
        return response.json();
    )
    .then(function(myJson)
        setData(myJson);
    )
    .catch((error) => 
        console.error("Error:", error);
      );
  );

【问题讨论】：

你应该添加一个依赖数组到useEffect。像这样传递空数组：useEffect(() => , [])。空数组意味着 - 在挂载时只执行一次。

【参考方案1】：

你需要为你的useEffect添加一个依赖，例如，如果你希望它只在第一次渲染时触发，你可以这样写

useEffect(() => 
fetch('http://localhost:3004/invoices',
    
        headers :  
            'Content-Type': 'application/json',
            'Accept': 'application/json'
    ,

)
.then(function(response)
    return response.json();
)
.then(function(myJson)
    setData(myJson);
)
.catch((error) => 
    console.error("Error:", error);
  );
,[]);

更有可能的是，您希望在某些情况发生变化时触发效果，在这种情况下，将依赖项添加到方括号中，如下所示...

useEffect(() => 
fetch('http://localhost:3004/invoices',
    
        headers :  
            'Content-Type': 'application/json',
            'Accept': 'application/json'
    ,

)
.then(function(response)
    return response.json();
)
.then(function(myJson)
    setData(myJson);
)
.catch((error) => 
    console.error("Error:", error);
  );
,[someState]);