React、semantic-ui 和 apollo 的无效钩子调用错误

Question

我使用 React、semantic-ui 和 apollo-client 创建了一个删除按钮，用于删除用户帖子。 代码如下：

import React, { useState } from 'react';
import gql from 'graphql-tag';
import { useMutation } from '@apollo/react-hooks';
import { Button, Icon, Confirm } from 'semantic-ui-react';

function DeleteButton({ postId }){
  const [confirmOpen, setConfirmOpen] = useState(false);

  const [deletePost] = useMutation(DELETE_POST_MUTATION, {
    variables: { postId }
  });

  return(
    <>
      <Button
        as="div"
        onClick={() => setConfirmOpen(true)}
      >
        <Icon name="trash"/>
      </Button>
      <Confirm
        open={confirmOpen}
        onCancel={() => setConfirmOpen(false)}
        onConfirm={deletePost}
      />
    </>
  );
};

const DELETE_POST_MUTATION = gql`
  mutation deletePost($postId: ID!){
    deletePost(postId: $postId)
  }
`;

export default DeleteButton;

单击按钮时出现以下错误：

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

我应该在哪里修复？ 我认为这段代码不会违反 React Hook 规则。

---

以下信息可能对调试有用。

目录结构

my-app
├── client
│   ├── node_modules
│   ├── package.json
│   └── src
│        ├── App.js
│        ├── index.js
│        └── components
│            └── DeleteButton.js
├── node_modules
├── package.json
└── graphql

反应安装

% npm ls react
my-app@1.0.0 /Path/to/my-app
├─┬ react-router-dom@5.2.0
│ ├─┬ react-router@5.2.0
│ │ ├─┬ mini-create-react-context@0.4.1
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2
└─┬ semantic-ui-react@2.0.3
  ├─┬ @fluentui/react-component-event-listener@0.51.7
  │ └── react@17.0.2 deduped
  ├─┬ @fluentui/react-component-ref@0.51.7
  │ └── react@17.0.2 deduped
  ├─┬ @semantic-ui-react/event-stack@3.1.2
  │ └── react@17.0.2 deduped
  ├─┬ react-dom@17.0.2
  │ └── react@17.0.2 deduped
  ├─┬ react-popper@2.2.5
  │ └── react@17.0.2 deduped
  └── react@17.0.2 deduped

% npm ls react-dom
my-app@1.0.0 /Path/to/my-app
└─┬ semantic-ui-react@2.0.3
  ├─┬ @fluentui/react-component-event-listener@0.51.7
  │ └── react-dom@17.0.2 deduped
  ├─┬ @fluentui/react-component-ref@0.51.7
  │ └── react-dom@17.0.2 deduped
  ├─┬ @semantic-ui-react/event-stack@3.1.2
  │ └── react-dom@17.0.2 deduped
  └── react-dom@17.0.2

依赖关系

// /my-app/client/package.json
"dependencies": {
  "@apollo/react-hooks": "^4.0.0",
  "apollo-cache-inmemory": "^1.6.6",
  "apollo-client": "^2.6.10",
  "apollo-link-context": "^1.0.20",
  "apollo-link-http": "^1.5.17",
  "graphql": "^15.5.0",
  "graphql-tag": "^2.12.3",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-scripts": "4.0.3",
  "web-vitals": "^1.0.1"
}

// /my-app/package.json
"dependencies": {
  "apollo-server": "^2.21.1",
  "bcryptjs": "^2.4.3",
  "graphql": "^15.5.0",
  "mongoose": "^5.12.0",
  "react-router-dom": "^5.2.0",
  "semantic-ui-css": "^2.4.1",
  "semantic-ui-react": "^2.0.3"
}

Answer 1

自己解决这个错误。

问题是 semantic-ui-react 没有安装在客户端目录级别。你可以在上面的 Dependencies 中看到我的错误。错误信息是Invalid hook call，但这与 React Hook 无关。

我通过以下步骤解决了这个问题。

1. 在client 级别安装semantic-ui-react

client % npm install semantic-ui-react semantic-ui-css

1. 在sns-merng 级别卸载语义-ui-react

sns-merng % npm uninstall semantic-ui-react semantic-ui-css --save

在正确的目录下运行npm 命令非常重要...