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个模态组件，因此决定将模态组件部分变成我自己的组件，这样我就可以在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>
      );
    }
  }

我从此代码中收到以下错误。

此错误的原因是什么？

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;

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

1 个答案: