仅当它需要的道具存在时才调用钩子，如果不返回默认值答案

【问题标题】：Call hook only if prop that it requires exist if not return default values仅当它需要的道具存在时才调用钩子，如果不返回默认值
【发布时间】：2021-11-14 10:44:45
【问题描述】：

在 SSR 期间的 Next.js 中，我从会话中获取用户对象和执行请求的客户端的 IP 地址。

 return {
   props: {
     user,
     ipAddress,
   },
 };

用户可以存在，但如果请求未经身份验证，它也可以是未定义的。我希望能够：

如果用户通过了身份验证，则运行使用 user.id 并获取用户设置的 react-query 挂钩。
如果用户未通过身份验证，请提供我存储在配置文件中的默认设置值。

const LandingPage = ({
  user,
  ipAddress,
}: LandingPageProperties): JSX.Element => {
  
  // User exist

  const { config } = useGetOwnSettingsQuery(
    {
      endpoint: 'http://localhost:3000/api/graphql',
      fetchParams: {
        headers: setFetchHeaders(),
      },
    },
    { userWhere: { id: user?.id } },
  );

  // User does not exist

  imported config from config.ts

  return <LandingPageMap className="map" { config goes here }/>;
};

我真的不知道如何执行我想要的，如果我在 useEffect 中调用它们，钩子不喜欢，如果我提前返回检查用户是否存在，它们也不喜欢。

【问题讨论】：

标签： reactjs react-hooks next.js

【解决方案1】：

通过引入另外一个接收过滤后的 id 的组件来解决。然后该组件获取数据并呈现所需组件的经过身份验证的版本。

const LandingPage = ({
  session,
  ipAddress,
}: LandingPageProperties): JSX.Element => {
  const id = session?.user.id;
  return (
    <Fragment>
      {id ? (
        <AuthenticatedMap id={id} ipAddress={ipAddress} />
      ) : (
        <LandingPageMap
          className="map"
          ipAddress={ipAddress}
          config={{ storage: appOptions.storage, plugins: appOptions.plugins }}
        />
      )}
    </Fragment>
  );
};

【讨论】：

【解决方案2】：

所以，我想我明白你的意思了，如果用户存在（意味着如果道具不是未定义的）然后获取配置，否则使用默认配置对吗？

如果您认为这可以在您的应用程序的其他地方使用，那么我建议您构建自己的钩子。

参考：https://reactjs.org/docs/hooks-custom.html

function useUserConfig({user}) {

let [config, setConfig] = useState(defaultConfig) 

useEffect(() => { 
//...
setConfig(..code ) 
}, [user])

}

然后在你的应用中，你就可以使用它了

let config = useUserConfig(props.user)

【讨论】：