javascript - 下一个JS : Right way to fetch client-side only data in a Functional Component

Question

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

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

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

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

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

const { 数据、加载、错误 } = useQuery(GET_CURRENT_USER_QUERY)

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

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

它不适用于:

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

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

有没有一个好的方法可以在 Next JS 中实现这一点并继续使用功能组件？

Answer 1

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

先从react导入

import { useEffect } from 'react';

组件中的用法如下所示

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

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

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

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