渲染模式弹出窗口

Question

我的目标是在单击按钮的事件期间启动模式弹出窗口。我在对包含模态的函数进行 Axios API 调用时遇到问题。 API调用的流程如下：

首先：这是发出 Axios 发布请求的按钮 (addToCart)（工作正常）

<button className="button is-primary" onClick={addToCart}>
   ADD TO CART
</button>

第二个：这是调用模态弹窗（Example()）的Axios post请求（工作正常）

const addToCart = () => {
    Axios.post(
       //standard backend API call is made here
    )
      .then((res) => {
        console.log("post called")
        Example(); //I want to launch my modal when this state is reached
      })
      .catch((err) => {
        if (err.response && err.response.status === 401) {
          setIsLoggedIn(false);
        }
      });

第三：这是我想弹出但在渲染函数时遇到问题的模态（问题）

https://react-bootstrap.github.io/components/modal/

function Example() {
  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>
    </>
  );
}

render(<Example />);

我收到以下错误：

  Line 38:3:  'render' is not defined  no-undef

如何正确呈现我的模态弹出窗口？

Answer 1

不要在 Example 组件中使用 show 状态，而是在 prop 中接收此数据。此外，您还需要向组件传递一些回调，以便能够对某些事件做出反应（例如，单击“关闭”或“保存更改”）。

我会做以下事情：

const Example = ({ show, onClose, onSave }) => (
  <Modal show={show} onHide={onClose}>
    <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={onClose}>
        Close
      </Button>
      <Button variant="primary" onClick={onSave}>
        Save Changes
      </Button>
    </Modal.Footer>
  </Modal>
)

这样你总是可以在某个父组件中渲染Example 组件并有条件地显示它，如下所示：

const SomeParentComponent = () => {
  const [showExample, setShowExample] = useState(false)

  const addToCart = () => {
    Axios.post("http://example.com/api/add-to-cart")
      .then((res) => {
        console.log("post called")
        setShowExample(true)
      })
      .catch((err) => {
        if (err.response && err.response.status === 401) {
          setIsLoggedIn(false);
        }
      })
  }

  return (
    <>
      <button className="button is-primary" onClick={addToCart}>
        ADD TO CART
      </button>

      <Example
        show={showExample}
        onClose={() => setShowExample(false)}
        onSave={() => setShowExample(false)}
      />
    </>
  )
}