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

【问题标题】：Next JS: Right way to fetch client-side only data in a Functional ComponentNext JS：在功能组件中仅获取客户端数据的正确方法
【发布时间】：2022-01-29 17:23:12
【问题描述】：

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

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

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

about 是值，aboutInput 是实际的输入元素本身。我也可以将 initialValue 传递给它。

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

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

这仅在客户端和服务器端执行 data 未定义。

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

它不适用于：

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

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

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

【问题讨论】：

标签： javascript reactjs next.js server-side-rendering

【解决方案1】：

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

先从react导入

import { useEffect } from 'react';

组件中的用法如下所示

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

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

useEffect 的第二个参数将决定何时触发 useEffect。如果你传递一个空数组 [ ]，那么 useEffect 只会在组件挂载时触发。如果您希望 useEffect 在任何道具更改时触发，则将此类道具作为依赖项传递给数组。

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

【讨论】：

我也尝试过使用 useEffect，在这种情况下，我对如何在渲染函数中使用 useEffect 中的变量感到困惑。例如。我的 useEffect const { data, loading, error } = useQuery(GET_CURRENT_USER_QUERY) const [name, nameInput] = useInput({ type: 'text', name: 'Name', placeholder: 'Your name', initialValue: data && data.currentUser.name, }) 作为组件的回报，我现在需要使用 nameInput。因为钩子返回我的组件本身。我的变量存在范围问题。有什么办法吗？

【解决方案2】：

我看到你提到了getInitailProps。所以你可能知道它的作用和它的caveats。如果您希望在服务器端定义数据，为什么不在表单所在的页面上使用getInitailProps。这样您可以从props 检索数据并将其传递给您的表单组件。它应该可以直接访问网址或从您的其他页面访问。

【讨论】：

是的，完全正确。但在上述情况下，我试图在客户端获取数据，因为不需要服务器端获取。
我遇到了同样的情况，我所做的是为我的组件提供合理的默认值/初始值，并使用useEffect 获取数据并填充它。像useEffect(()=>{fetchData(), populateForm()},[]) 这样的东西只会在客户端调用一次。