错误：无效的钩子调用 - 调用模态组件时答案

【问题标题】：Error: Invalid hook call - when calling a Modal component错误：无效的钩子调用 - 调用模态组件时
【发布时间】：2021-11-03 01:16:57
【问题描述】：

当我尝试调用 Modal 组件时出现此错误 -

错误：无效的挂钩调用。钩子只能在体内调用的一个功能组件。这可能发生在以下情况之一原因：

您的 React 和渲染器版本可能不匹配（例如 React DOM）

您可能违反了 Hooks 规则

您可能在同一个应用程序中拥有多个 React 副本有关如何调试的提示，请参阅 https://reactjs.org/link/invalid-hook-call 并解决此问题。

如何在功能组件中按下按钮时显示此模式？
谢谢

Search.jsx

    import AddedToCart from '../modals/Modal';
    const Search=()=>{ 
    return(
              <div>
                  <button
                      onClick={() => AddedToCart()}
                    >
             </div>
         )

}

Modal.jsx

import Modal from 'react-bootstrap/Modal';
import React, { useState } from 'react';
export default function AddedToCart() {
  const [show, setShow] = useState(false);  
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <button variant='primary' onClick={handleShow}>
        Launch demo modal
      </button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <button variant='secondary' onClick={handleClose}>
            Close
          </button>
          <button variant='primary' onClick={handleClose}>
            Save Changes
          </button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

任何帮助都会很棒。

【问题讨论】：

标签： reactjs react-hooks bootstrap-modal react-bootstrap react-modal

【解决方案1】：

   onClick={() => AddedToCart()}

你调用它就像点击处理程序中的一个函数，这不是你在反应中呈现东西的方式。

设置一个标志

   onClick={() => setOpenModal(true)}

然后在渲染中

{openModal && <AddedToCart/>}

【讨论】：

谢谢莫尼亚瓦！