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

我用React、语义用户界面和apollo客户端创建了一个删除按钮，用于删除用户帖子。 代码如下所示：

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;

我应该在哪里修理？ 我认为这段代码没有违反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",
  "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"
}

---

自己解决这个错误

问题是语义ui react未安装在客户端目录级别。您可以在上面的依赖项中看到我的错误。错误消息是

无效的钩子调用

，但这与React钩子无关

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

在

客户端

级别安装语义用户界面

client%npm安装语义ui-react语义ui-css

在

sns merng

级别卸载语义用户界面react

sns merng%npm卸载语义用户界面react语义用户界面css--save

---

在正确的目录下运行

npm

命令是非常重要的…

您可以尝试在功能组件内部移动

DELETE\u POST\u MUTATION

吗？在

DELETE按钮内部移动查询并不能解决问题。如果您更改
const[deletePost]=usemotation（DELETE\u POST\u MUTATION，{variables:{postId}}；
by
const[deletePost，{data}]
就像在apollo中一样？@antoineso添加
{data}不会改变事情
。好的，问题可能来自确认组件。您可以尝试在其他地方调用delete吗？我在semantic github repo上发现了这个，可以成为一个俱乐部。非常感谢您在这里发布后续信息。在一个小时的融合后，帮助我解决了同样的问题。谢谢！
// /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"
}