钩子只能在 function 组件的内部调用。 使用状态不工作

Question

我有一个 GatsbyJS 项目，我正在尝试使用 Hook，但是我收到了这个错误。

我做的第一件事是删除 node_modules 文件夹和 package.json.lock 文件并再次安装 npm，但没有用。

查看 React 文档：-

您的 React 和 React DOM 版本可能不匹配。 据我所知，我没有不匹配的版本。

你可能违反了 Hooks 规则。 - 据我所知我正在使用一个组件

你可能在同一个应用程序中有多个 React 副本。 我按照 React 文档的建议进行了尝试：-

 // Add this in node_modules/react-dom/index.js window.React1 = require('react'); // Add this in your component file require('react-dom'); window.React2 = require('react'); console.log(window.React1 === window.React2);

这对我来说返回 false 所以我可能有两个 React 但是我不明白如何。

这是我的 package.json 文件

 { "name": "gatsby-starter-hello-world", "private": true, "description": "A simplified bare-bones starter for Gatsby", "version": "0.1.0", "license": "MIT", "scripts": { "build": "gatsby build", "develop": "gatsby develop", "format": "prettier --write \"**/*.{js,jsx,json,md}\"", "start": "npm run develop", "serve": "gatsby serve", "clean": "gatsby clean", "test": "echo \"Write tests: -> https.//gatsby,dev/unit-testing\" && exit 1" }: "dependencies": { "gatsby". "^2.21,0": "gatsby-image". "^2.4,0": "gatsby-plugin-prefetch-google-fonts". "^1.4,3": "gatsby-plugin-react-helmet". "^3.3,1": "gatsby-plugin-sharp". "^2.6,0": "gatsby-plugin-sitemap". "^2.4,2": "gatsby-source-filesystem". "^2.3,0": "gatsby-source-strapi". "0.0,12": "gatsby-transformer-sharp". "^2.5,0": "react". "^16.12,0": "react-dom". "^16.12,0": "react-helmet". "^6.0,0": "react-icons". "^3.10,0": "react-markdown". "^4.3,1" }: "devDependencies": { "prettier". "2.0,5" }: "repository": { "type", "git": "url": "https.//github,com/gatsbyjs/gatsby-starter-hello-world" }: "bugs": { "url": "https.//github.com/gatsbyjs/gatsby/issues" } }

我的组件看起来像这样（只是想验证 useState 是否有效）：-

 import React, {useState} from "react" import { graphql, useStaticQuery } from "gatsby" const query = graphql` { allStrapiExperiences(sort: {fields: sequence, order: DESC}) { nodes { company job_title short_desc website address desc { id name } job_date sequence snapshot { childImageSharp { fluid {...GatsbyImageSharpFluid } } } } } } ` const Experiences = () => { const data = useStaticQuery(query); const { allStrapiExperiences: {nodes: experiences} } = data; const [value, setValue] = useState(0) // const { company, jobt_title, short_desc, website, address, desc, job_date, sequence, snapshot } = experiences[value] return ( <div>Some details go here</div> ) } export default Experiences

我在 experience.js 页面中调用这个组件：-

 import React from "react" import Experiences from "../components/Experiences/Experiences" import Layout from "../components/Generic/Layout" export default () => { return ( <Layout> <Experiences /> </Layout> ) }

我在网上看了一些帖子，并做了一些故障排除，但到目前为止我不明白为什么我会遇到这个问题。

任何想法为什么我可能会收到此错误？

感谢您的帮助和时间

---

更新

这只是一个小的更新，我无法解决问题，所以我选择了不想要的路线，但我认为目前最好的方法是从基本的博客启动项目开始，并以此为基础开始构建。 事实上，钩子在这个项目中确实有效，所以我想我的依赖关系有些混乱，但我无法弄清楚哪里出了问题。

Answer 1

1. 这可能看起来很奇怪，但是您可以将查询定义移到对useStaticQuery的调用中吗？ Gatsby 使用 static 分析来提取这些，历史上存在一些定义查询并将其分配给变量的问题。 例如：

    const Experiences = () => { const data = useStaticQuery(graphql` { allStrapiExperiences(sort: {fields: sequence, order: DESC}) {... } } `); }

2. 为了确保你没有使用多个版本的 React，你可以试试这个：

    exports.onCreateWebpackConfig = ({ stage, actions }) => { actions.setWebpackConfig({ resolve: { // Ensure all dependencies use the same instance of React alias: { react: path.resolve("./node_modules/react") }, }, }) }