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

Question

I tried asking a question earlier but realized it was a bit all over the place so no one could really understand it properly. So here's a more clarified attempt.

I am currently working on a CRUD web project that allows the user to edit, view and create more users which is then displayed on a table.

I have been using react-bootstrap's components so decided to use the Modal component provided. ( https://react-bootstrap.netlify.com/components/modal/#modals-live )

It was successfully working without any errors when I just called and used the component within App.tsx as follows:

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>

But I think realized that I'll need more than 1 modal component for my program and decided to make the modal component section into my own component that I can reuse as many times as I want and customize as I want within the App.tsx

So I decided to make a NewModal.tsx component that has the bootstrap modal component and button pre-made meaning I'd only have to call one line () rather than a whole chunk. the NewModal.tsx code is as follows:

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>
      );
    }
  }

I am getting the following error from this code.

What is the cause for this error?

Answer 1

You can't use hooks inside class components, you need to change it to be a function based component, which can look something like this:

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;