时间戳

首页 > 解决方案 > TypeScript React 无效的钩子调用错误（“错误：无效的钩子调用。”）

javascript - TypeScript React 无效的钩子调用错误（“错误：无效的钩子调用。”）

问题描述

我早些时候尝试过问一个问题，但意识到它有点到处都是，所以没有人能真正正确地理解它。所以这里有一个更明确的尝试。

我目前正在开发一个 CRUD Web 项目，该项目允许用户编辑、查看和创建更多用户，然后显示在表格上。

我一直在使用 react-bootstrap 的组件，所以决定使用提供的 Modal 组件。（https://react-bootstrap.netlify.com/components/modal/#modals-live）

当我刚刚调用并使用 App.tsx 中的组件时，它成功运行，没有任何错误，如下所示：

const App: React.FC = () => {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <div className="App">
  <NavBar/>
  <Jumbotron fluid className="userJumbotron">
      <Container>
        <h1>Manage Users</h1>
        <Button variant="outline-dark" onClick={handleShow}>Add new user</Button>
          <Modal show={show} onHide={handleClose}>
            <Modal.Header closeButton>
              <Modal.Title>Add User</Modal.Title>
            </Modal.Header>
        <Modal.Body><NewUserForm/></Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>

但我认为我意识到我的程序需要超过 1 个模态组件，并决定将模态组件部分制作成我自己的组件，我可以在 App.tsx 中根据需要多次重复使用和自定义

所以我决定制作一个 NewModal.tsx 组件，它具有引导模式组件和预先制作的按钮，这意味着我只需要调用一行 () 而不是整个块。NewModal.tsx 代码如下：

export default class NewModal extends Component<any> {
  constructor (props: any){
    super(props)
    this.state={
      show:false
    }
  }
    render() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

      return (
        <div>

    <h1>Manage Users</h1>
    <Button variant="outline-dark" onClick={handleShow}>Add new user</Button>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Add User</Modal.Title>
        </Modal.Header>
        <Modal.Body><NewUserForm/></Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
</div>
      );
    }
  }

我从此代码中收到以下错误。 在此处输入图像描述

这个错误的原因是什么？

标签： javascriptreactjstypescriptreact-bootstrap

解决方案

您不能在类组件中使用钩子，您需要将其更改为基于函数的组件，如下所示：

const NewModal = () => {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <div>
      <h1>Manage Users</h1>
      <Button variant="outline-dark" onClick={handleShow}>
        Add new user
      </Button>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Add User</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <NewUserForm />
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

export default NewModal;

推荐阅读