React JavaScript Axios请求出现问题

Question

我试图从Node.js获得数据，但它正在发出5000个请求，服务器变得非常慢，甚至不加载其他页面中的一些其他图像。我需要限制请求吗?

解决方案吗?

const [data, SetData] = useState([]);
useEffect(() => {
axios.get(`/api/data/${id}`).then((response) => {
SetData(response.data)
})
})

当我将}, [])添加到useEffect时，公共文件夹中的图像没有显示。

Answer 1

您的效果可能缺少id作为依赖项。把它改成这样:

const [data, setData] = useState([]);
useEffect(() => {
if (id) {
axios.get(`/api/data/${id}`).then((response) => {
setData(response.data)
});
}
}, [id]);

Answer 2

useEffect在每次渲染后运行，没有依赖项数组，导致无限循环

useEffect(() => {
axios.get(`/api/data/${id}`).then((response) => {
SetData(response.data)
});
//Infinite loop
}); 

提供一个空的依赖数组，这将导致效果函数只在组件第一次渲染后运行一次。

useEffect(() => {
axios.get(`/api/data/${id}`).then((response) => {
SetData(response.data)
});
// Correct! Runs once after render with empty array
}, []);