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钩子进入无限循环

1 个答案: