Блог

Моя цель-запустить модальное всплывающее окно во время нажатия кнопки. У меня возникли проблемы с вызовом API Axios функции, содержащей модал. Процесс вызова API был приведен ниже:

Во-первых: Это кнопка, на которой выполняется запрос на публикацию Axios (AddToCart) (работает нормально)

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

Во-вторых: Это запрос 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 amp;amp; 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
 

Как я могу правильно отобразить свое модальное всплывающее окно?

Вместо того, чтобы иметь show состояние в вашем Example компоненте, получите эти данные в реквизите. Кроме того, вы также захотите передать некоторые обратные вызовы компоненту, чтобы иметь возможность реагировать на определенные события (например, нажать «Закрыть» или «Сохранить изменения»).

Я бы сделал следующее:

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