Typescript useStaticQuery:钩子调用无效。钩子只能在函数组件的主体内部调用
我试图通过gatsby-config.js中的Typescript useStaticQuery:钩子调用无效。钩子只能在函数组件的主体内部调用,typescript,graphql,gatsby,Typescript,Graphql,Gatsby,我试图通过gatsby-config.js中的usesticquery获取值。 我的代码如下 有人能想出办法来解决这个问题吗 先谢谢你 回购 package.json "dependencies": { "@babel/core": "^7.5.5", "gatsby": "^2.13.28", "gatsby-link": "^2.2.2", "gatsby-plugin-react-helmet": "^3.1.2", "gatsby-plugin-
usesticquery
获取值。
我的代码如下
有人能想出办法来解决这个问题吗
先谢谢你
回购package.json
"dependencies": {
"@babel/core": "^7.5.5",
"gatsby": "^2.13.28",
"gatsby-link": "^2.2.2",
"gatsby-plugin-react-helmet": "^3.1.2",
"gatsby-plugin-sass": "^2.1.3",
"gatsby-plugin-typescript": "^2.1.2",
"gatsby-source-filesystem": "^2.1.8",
"gatsby-source-instagram-all": "^2.0.5",
"gatsby-transformer-remark": "^2.6.10",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"webpack": "^4.36.1"
},
"devDependencies": {
"@types/react": "^16.8.24",
"@types/react-dom": "^16.8.5",
"@types/react-helmet-async": "^1.0.0",
"env-cmd": "^9.0.3",
"eslint-plugin-react-hooks": "^1.6.1",
"gatsby-plugin-tslint": "^0.0.2",
"tslint": "^5.18.0",
"tslint-loader": "^3.5.4",
"tslint-react": "^4.0.0",
"typescript": "^3.5.3"
}
siteMetadata.ts
import { useStaticQuery, graphql } from "gatsby";
export const useSiteMetadata = () => {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
author
}
}
}
`);
return site.siteMetadata.title;
};
组件名称中的第一个字母未大写,导致此问题 而且
useStaticQuery
不是这样工作的,您需要在您使用的组件内部呈现依赖于此查询的组件的子级
UseSiteMetadata的组件将是:
import { useStaticQuery, graphql } from "gatsby";
export const useSiteMetadata = () => {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
author
}
}
}
`);
return (
<h1>
<Link className={headerStyles.title} to="/">
{site.siteMetadata.title}
</Link>
</h1>
);
import * as React from "react";
import { UseSiteMetadata } from 'siteMetadata'
export default class Header extends React.Component {
render() {
return (<UseSiteMetadata /> )
}
}
useSiteMetadata
是一个函数,您必须调用它来获取它返回的值(即,writeuseSiteMetadata()
。此外,它不是一个普通函数,它是一个React钩子,这意味着在渲染期间只能从functional React组件内部调用它。调用它来初始化模块范围内的某个变量将不起作用。现在的错误是因为钩子不能在类组件中使用。它仅用于功能组件,您需要类似于const Header:React.FC=()=>(…);导出默认头;
@artem非常感谢您的帮助。您让我度过了美好的一天。终于成功了
import * as React from "react";
import { UseSiteMetadata } from 'siteMetadata'
export default class Header extends React.Component {
render() {
return (<UseSiteMetadata /> )
}
}