Next JS：在功能组件中获取仅客户端数据的正确方法

Question

我有一个功能组件。基本上，该页面由一个表单组成 - 我需要将一些现有数据填充到表单中并让用户更新它。

我正在使用我编写的一个钩子来处理表单。它的作用是这样的

 const [about, aboutInput] = useInput({
    type: 'textarea',
    name: 'About you',
    placeholder: 'A few words about you',
    initialValue: data && data.currentUser.about,
  })

about是值并且aboutInput是实际的输入元素本身。我也可以向它传递一个初始值。

在组件的开头，我像这样获取数据：

const { data, loading, error } = useQuery(GET_CURRENT_USER_QUERY)

这只在客户端执行，在服务器端data未定义。

因此，此代码仅在我通过另一个客户端页面的链接组件导航到该页面时才有效。

它不适用于：

1. 当我直接访问 URL 时
2. 当我从另一个 SSR 页面（使用 getInitailProps）导航到此页面时

我不想使用生命周期方法/类组件（因为我正在使用钩子，并且希望继续使用功能组件。

在 Next JS 中是否有一个很好的方法来实现这一点并继续使用功能组件？

Answer 1

您可以使用useEffect Hook获取仅客户端数据。

首先从以下位置导入react

import { useEffect } from 'react';

组件中的用法如下所示

useEffect(() => {
  return () => {
    // clean-up functions
  }
}, []);

第一个参数是一个函数，您可以在其中进行 API 调用。

useEffect的第二个参数将确定何时触发useEffect。如果传递空数组 [ ]，则只有在组件 Mounts 时才会触发useEffect 。如果您希望useEffect在任何 props 更改时触发，则将此类 props 作为依赖项传递给数组。

如果您想从查询字符串中获取 GET_CURRENT_USER_QUERY ，您可以传递getInitailProps中的参数，并将其作为useEffect数组依赖项中的 props 读取。