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

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

我使用 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

react 安装

% 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","mongoose": "^5.12.0","react-router-dom": "^5.2.0","semantic-ui-css": "^2.4.1","semantic-ui-react": "^2.0.3"
}

解决方法

自己解决这个错误。

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

我通过以下程序解决了这个问题。

在client级别安装semantic-ui-react

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

卸载 sns-merng 级别的语义化 ui-react

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

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