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(data)”就是生成循环的那个。

Answer 1

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

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

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

同样，如果您希望 useEffect 回调仅在特定变量更改时运行（例如，假设您在范围内有一个 pageNumber 变量），您可以将该变量放入数组中：

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

这将导致showSubscribed 被调用

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

useLayoutEffect 的工作方式相同。