es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Redirigir con “useNavigate” y “state” parece ser difícil de lograr.

05 Aug, 2023 Programación

Lo que estoy intentando hacer:
Tengo un formulario que un cliente está completando. Eligen el día y la hora de una cita antes de pagarla. Durante el pago, son redirigidos a una página de pago alojada y luego regresan para completar el proceso. Cuando se redirige, parte de la información de la tarjeta de crédito está en la ruta. Estoy intentando usar useParams para obtener esa información y luego redirigirlos a la página en la que estaban. Parte de los parámetros me indica que su pago fue aprobado y eso es todo lo que necesito. Necesito establecer el estado como aprobado en función de esto. Luego, usar ese estado en mi página de citas, completar el formulario y enviarlo, y volver a establecer el estado en falso cuando termine.

Código actual:
“`js
const location = useLocation();
let navigate = useNavigate();
const params = new URLSearchParams(location.search);
<Route
path=’/confirm’
element={
params.has(‘sslapprovalcode’) ? (

                navigate('./appointments', { approved: true })
              ) : (
                <div style={{ height: '1000px' }}>
                  Se produjo un error al procesar la tarjeta. Utilice una tarjeta diferente o comuníquese con el cliente.
                </div>
              )
            }
/>

navigate={navigate}
/>
}
/>


Luego, intentando hacer esto al final de mi función de envío

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    Para resolver este problema, puedes utilizar el hook useParams para obtener los parámetros necesarios de la URL. Para establecer el estado, puedes utilizar el hook useState. Aquí tienes un ejemplo:

    import { useParams, useNavigate } from 'react-router-dom';
import { useState } from 'react';

function ConfirmaciónDePago() {
  const params = useParams();
  const navigate = useNavigate();
  const [approved, setApproved] = useState(params.ssl_approval_code === 'approved');

  if (approved) {
    navigate('/citas', { state: { approved } });
  } else {
    return (
      <div style="{{" height:="" '1000px'="" }}="">
        Se produjo un error al procesar la tarjeta. Por favor, utiliza una tarjeta diferente o ponte en contacto con el cliente.
      </div>
    );
  }
}

function Citas() {
  const navigate = useNavigate();
  const [approved, setApproved] = useState(false);

  function handleSubmit() {
    // enviar formulario y establecer approved en false
    setApproved(false);
    navigate('/gracias');
  }

  return (
    <div>
      <h1>Citas</h1>
      {approved && <p>El pago ha sido aprobado.</p>}
      <form onsubmit="{handleSubmit}">
        {/* campos del formulario */}
      </form>
    </div>
  );
}

    En el ejemplo anterior, primero utilizamos el hook useParams para obtener el parámetro necesario de la URL. Luego utilizamos el hook useState para establecer el estado approved basado en el valor del parámetro. Si el pago es aprobado, navegamos a la página Citas con el estado approved establecido en true. Si el pago no es aprobado, mostramos un mensaje de error.

    En el componente Citas, utilizamos el hook useNavigate para navegar a la página de agradecimiento después de enviar el formulario. También utilizamos el hook useState para establecer el estado approved, que se pasa como una propiedad al componente Citas. Si el pago es aprobado, mostramos un mensaje en la página.

Comments are closed.