1

Estoy teniendo el problema de actualizar la informacion del los botones creados con el SDK de Paypal en react. En mi app.js creo la vista con los componentes y uno de estos crea los botones de Paypal usando Javascript, al rellenar el monto a pagar que deseo y hacer click en el boton la informacion actualizada del monto no esta llegando, solo la informacion que obtiene de mi api al levantar la vista.

De esta forma estoy llamando el Boton de paypal con react: En el state tengo la info que viene por api y se la asigno mediante el constructor.

<Col xs={12} className="mt-3">
                    <Row className="mt-3">
                        <Col xs={3}>
                        </Col>
                        <Col xs={6} >
                            <ButtonPaypal
                                IdLink={this.state.IdLink}
                                IdCredito={this.state.IdCredito}
                                Dolares={this.state.MontoCargado}

                            />

                        </Col>
                    </Row>
                </Col>

En el Componente de texto tengo un evento que actualiza la informacion mediante el evento, y lo cambia correctamente ya que hasta el archivo que contiene los botones de paypal lleva bien la info.

EventoIngresarColones(event) {
    this.setState({ MontoCargado: event.target.value });
    console.log('Log:' + this.state.MontoCargado);
}

 <Form.Control placeholder='Ingresar Colones'
                                        id="InputMonto"
                                        onChange={this.EventoIngresarColones}
                                        style={{ backgroundColor: "#d6f0fa", color: "#4ebce9", borderStyle: "none" }} />

Aqui en la creacion del boton con JavaScript, que al momento de dibujar estos botones en pantalla obtiene la info que viene de la api pero no la cantidad de dolares que ingreso a mano, entonces esa info no la logro actualizar.

    export function ButtonPaypal(IdLink) {
      
      const paypalReferencia = React.useRef();
      React.useEffect(() => {
        window.paypal.Buttons({
          createOrder: function () {
            return fetch(`https://localhost:44386/Api/Paypal/ObtenerPagoPaypal?IdCredito=${IdLink.IdCredito}&Dolares=${IdLink.Dolares}&IdLink=${IdLink.IdLink}`, {
              method: 'post',
              headers: {
                'content-type': 'application/json'
              }
            }).then(function (res) {
              return res.json();
            }).then(function (data) {
              return data.id; // Use the key sent by your server's response, ex. 'id' or 'token'
            });
          }
         }).render("#paypalReferencia");
        },[]);
    
      return <div id="paypalReferencia"></div>
}

1 respuesta 1

1

El Hook useEffect que se usa dentro de la función ButtonPaypal, está configurado para correr el efecto solo una vez:

React.useEffect(() => {
   //tu codigo...
},[]);

Ahora, lo que se necesita es observar por cambios en la siguiente propiedad del objeto State, cada que se introduce algún valor en el Input tag:

this.state.MontoCargado

Luego, dentro del hook useEffect en el query string de fecth dentro de la funcion ButtonPaypal, se esta usando props.Dolares (IdLink.Dolares):

query string....&Dolares=${IdLink.Dolares}

Al ejecutar setState luego de ingresar datos en el Input, se muta el objeto State, y se ejecuta el re-render, pero Hook useEffect solo se ejecuta una vez, al iniciar la App, pues no tiene dependencias asignadas.

La sugerencia es configrar useEffect con una dependencia, en este caso parece ser que lo que se requiere es saber cuando muta el estado de la propiedad MontoCargado:

 React.useEffect(() => {
       //tu codigo...
    },[IdLink.Dolares]);

De esta forma, el useEffect se disparará siempre que la propiedad IdLink.Dolares cambie.

Puede que se tenga algún mensaje en la consola relacionado a missing dependency, en este momento.

Finalmente, lo correcto sería agregar las 3 dependencias que usa el hook useEffect, que son todas las props que se pasan en el componente ButtonPaypal:

<ButtonPaypal
            IdLink={this.state.IdLink}
            IdCredito={this.state.IdCredito}
            Dolares={this.state.MontoCargado}
        />

Pues todas estas props están siendo referenciadas como dependencias del hook useEffect, en el query string del método fetch:

fetch(`https://localhost:44386/Api/Paypal/ObtenerPagoPaypal?IdCredito=${IdLink.IdCredito}&Dolares=${IdLink.Dolares}&IdLink=${IdLink.IdLink}`
6
  • gracias ya lo pruebo Commented el 8 ene. 2021 a las 22:03
  • Me encuentro con el mismo problema de siempre, que al recargar esos botones, se me duplican los botones, y eso me paso al pasar por el hook esa propiedad. Commented el 8 ene. 2021 a las 22:09
  • ok, ¿Ya puedes ver la cantidad de dolares que ingreso a mano? fue la pregunta principal
    – g.4
    Commented el 8 ene. 2021 a las 22:16
  • Una observación que puede ser de ayuda, con respecto a como se renderiza el botón, el div que se regresa no tiene la propiedad ref (que viene del hook useRef() que se configuró al inicio del componente), yo la agregaría también: <div ref={paypalReferencia} id="paypalReferencia"></div>, tal vez también se tenga que pasar como expresión {JSx} en el método render de window.paypal.Buttons, tendrías que probar de tu lado, saludos
    – g.4
    Commented el 8 ene. 2021 a las 22:48
  • Claro como respuesta a la pregunta me sirvio, pero llegue a este problema cuando logre que no se dupliquen los botones Commented el 9 ene. 2021 a las 0:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.