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 以同样的方式工作。

ReactJs useState 钩子进入无限循环

ReactJs useState hook entering into an infinite loop

javascript

promise

async-await

reactjs

use-state