Next.jscommerce/Rect-在functional Component-dynamic header lo

Question

我正在摆弄Next.JS商务框架。

为了接收正确的翻译，我必须在我的graphql API请求中设置一个动态的Accept-Language头。路由和一切都很好，当我手动将标题设置为es=spanish/en-US=english时，我得到了正确的翻译。

这是我的代码：

import type { GraphQLFetcher } from '@commerce/api'
import fetch from './fetch'
import { API_URL, API_TOKEN } from '../../const'
import { getError } from '../../utils/handle-fetch-response'
import { useRouter } from 'next/router'
const fetchGraphqlApi: GraphQLFetcher = async (
query: string,
{ variables } = {},
fetchOptions
) => {

const { locale } = useRouter()
console.log(locale)
const res = await fetch(API_URL, {
...fetchOptions,
method: 'POST',
headers: {
'Accept-Language': 'es',
'X-Shopify-Storefront-Access-Token': API_TOKEN!,
...fetchOptions?.headers,
'Content-Type': 'application/json',
},
body: JSON.stringify({
query,
variables,
}),
})
const { data, errors, status } = await res.json()
if (errors) {
throw getError(errors, status)
}
return { data, res }
}
export default fetchGraphqlApi

我想用next/router检索区域设置，我可以在所有组件中这样做。当我试图在上面发布的代码中做这件事时，我得到了以下错误：

服务器错误错误：钩子调用无效。钩子只能在函数组件的主体内部调用

我很困惑。这不是一个功能组件吗？为什么我不能叫任何钩子？

有什么想法吗？我该怎么做？

谢谢你的帮助。

Answer 1

根据React.js文档

(This(函数是一个有效的React组件，因为它接受带有数据的单个"props"(代表属性(对象参数，并返回一个React元素。

您的函数接受多个参数，并返回一个对象而不是有效的React元素。这就是为什么钩子没有将您的功能识别为功能组件的原因。