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

Question

我早些时候尝试过问一个问题，但发现它有点绕口而出，所以没有人能真正正确理解它。所以这里有一个更明确的尝试。

我目前正在开发一个 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 个模态组件，并决定将模态组件部分制作成我自己的组件，这样我就可以在应用程序中多次重复使用和自定义.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>
      );
    }
  }

我从这段代码中得到以下错误。

这个错误的原因是什么？

Answer 1

你不能在类组件中使用钩子，你需要把它改成一个基于函数的组件，看起来像这样：

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;