如何仅在条件下处理 useEffect答案

【问题标题】：How to handle useEffect only on condition如何仅在条件下处理 useEffect
【发布时间】：2020-10-10 04:54:26
【问题描述】：

我正在做一个 Gastby 网站。

问题在于 Gatsby 会在路由更改时重置状态（卸载组件）。为避免这种情况，您可以生成适用于所有页面的包装器。

在这个包装器中，我必须发出一组 api 请求，前提是用户已登录。

所以我想出了这个，这似乎是错误的

const Watcher = ({ isLogged }) => {      
  return (
    <>
      {isLogged && <Requests />}
      <Header />
      {children}
    </>
  )
};

然后在 Requests 组件中

const Requests = () => {
  useEffect(() => {
    // some requests go here
  }, [someVar1])  
  useEffect(() => {
    // some requests go here
  }, [someVar2])  
  useEffect(() => {
    // some other requests go here
  }, [someVar3])    
  return null
}

它有效，但看起来很尴尬。我知道我可以将所有 useEffects 代码段传递给 Watcher.js，但它也不整洁，因为有几个 useEffects，并且会应用条件来查看每个用户是否登录，另外，重新-当登录状态改变时运行每个useEffect。

【问题讨论】：

这些请求是否只调用一次（在用户登录后）？还是在您的应用中多次调用它们？
@DylanKerler 在用户登录后他们会被调用一次。问题是他们需要在包装器上，否则 gatsby re 在每次路由更改时都会发出请求

标签： reactjs api request use-effect

【解决方案1】：

您可以按照您的要求将所有这些合并到一个 useEffect 中，条件是。

当然，您必须添加其他依赖项，例如 useEffect 中使用的函数

这里的例子：

useEffect(() => {
    if(someVar1 === 'somevalue')
        // some requests go here
    if(someVar2 === 'something')
        // some requests go here
    if(someVar3)
        // some other requests go here
},[someVar1, someVar2, someVar3])

另外，我建议您使用redux-saga 并仅在用户登录时向其发送操作。

Documentation here

【讨论】：