Question

我有一个GatsbyJS项目，正在尝试使用Hook，但是出现此错误。

我要做的第一件事是删除node_modules文件夹和package.json.lock文件，并再次进行npm安装，

查看React文档：-

您可能使用了不匹配的React和React DOM版本。 据我了解，我没有错配的版本。

您可能违反了《钩子规则》。-据我所知，我正在使用组件

您可能在同一应用中拥有多个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>
  )
}

我已经看了一些在线帖子，并进行了一些故障排除，但是到目前为止，我仍然不明白为什么会有这个问题。

有什么主意为什么会出现这个错误？

感谢您的帮助和时间

更新

仅对此稍作更新，我无法解决问题，所以我走了不必要的路线，但我认为目前最好的方法是从基本的Blog Starter项目开始并从中开始构建。实际上，钩子确实可以在该项目中工作，所以我想我对依赖项有些混乱，但是我无法弄清楚出了什么问题。

Answer 1

这似乎很奇怪，但是您可以将查询定义移到对useStaticQuery的调用中吗？ Gatsby使用静态分析来提取这些内容，从历史上看，在定义查询并将其分配给变量方面存在一些问题。例如：
```
const Experiences = () => {
  const data = useStaticQuery(graphql`
    {
      allStrapiExperiences(sort: {fields: sequence, order: DESC}) {
        ...
      }
    }
  `);
}
```

要确保您没有使用多个版本的React，可以尝试以下操作：

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

挂钩只能在功能组件的主体内部调用。 useState不起作用

1 个答案: