Json-服务器 GET 请求继续触发

Question

我已经在我的机器上本地设置了一个 json 服务器，用作我正在创建的应用程序的模拟 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);
      });
  });

Answer 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]);

Json-服务器 GET 请求继续触发

Json-sever GET requests keep firing

api

json

reactjs

json-server