ReactJs的useState钩子进入一个无限循环

Question

我的问题是，我想做一个异步函数，当用户访问一个"页面"；它执行，从数据库中收集数据，并将其显示给用户，它工作起来，但进入了一个永无止境的循环。这是代码：

const [subbbed, setSubbed] = useState([])
async function showSubscribed() {

const response = await api.get('subscribed', {
params: {
hour_id: person.id
}
})

return response.data       
}  

useEffect(()=>{
showSubscribed().then((data)=>{
setSubbed(data)
})
})

而"；setSubbed(数据("；是生成循环的那个。

Answer 1

您没有将第二个参数传递给useEffect，因此对它的回调将在每次渲染时运行，因此在每次渲染时都会调用showSubscribed。

如果您希望showSubscribed仅在首次装入组件时运行，请传递一个空数组作为第二个参数：

useEffect(
() => {
showSubscribed().then((data)=>{
setSubbed(data)
});
},
[]
);

类似地，如果您希望useEffect回调只在特定变量更改时运行(例如，假设您的作用域中有一个pageNumber变量(，则可以将该变量放入数组：

useEffect(
() => {
showSubscribed().then((data)=>{
setSubbed(data)
});
},
[pageNumber]
);

这将导致showSubscribed被称为

• 在第一次渲染和之后
• 每当pageNumber值发生变化时

useLayoutEffect的工作方式与此相同。