0

Estoy intentando hacer un dashboard a partir de la siguiente plantilla de react: https://github.com/coreui/coreui-free-react-admin-template

El problema que tengo es que quiero que cuando se pulse un botón se pase un valor desde el frontend (REACT) al backend (NODE), pero parece que se pasa el valor algunas veces y luego peta o el fetch se repite varias veces.

Página en REACT:

import React, { useCallback } from 'react'
import { Link } from 'react-router-dom'
import {
  CButton,
  CCard,
  CCardBody,
  CCardGroup,
  CCol,
  CContainer,
  CForm,
  CFormInput,
  CInputGroup,
  CInputGroupText,
  CRow,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilLockLocked, cilUser } from '@coreui/icons'

const Page404 = () => {

  const fetchValue =  () => {
    const url = 'http://192.168.1.50:9000?value=Mesa1'
    fetch(url)
    .then((response) => {console.log(response['body'])
   })
  }

  return (
    <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
      <CContainer>
        <CRow className="justify-content-center">
          <CCol md={8}>
            <CCardGroup>
            <CCard className="text-white bg-primary py-5" style={{ width: '44%' }}>
                <CCardBody className="text-center">
                  <div>
                    <h2>Cliente</h2>
                    <p>
                      Texto
                    </p>
                      <button color="primary" onClick={fetchValue}>Button </button>
                      <CButton color="primary" onClick={fetchValue} className="mt-3">
                        Continuar
                      </CButton>
                  </div>
                </CCardBody>
              </CCard>
              <CCard className="text-white bg-primary py-5" style={{ width: '44%' }}>
                <CCardBody className="text-center">
                  <div>
                    <h2>Empresa</h2>
                    <p>
                      Texto
                    </p>
                    <Link to="/login">
                      <CButton color="primary" className="mt-3" active tabIndex={-1}>
                        Continuar
                      </CButton>
                    </Link>
                  </div>
                </CCardBody>
              </CCard>
            </CCardGroup>
          </CCol>
        </CRow>
      </CContainer>
    </div>
  )
}

export default Page404

Código del backend en node:

const express = require('express')
const app = express()
const port = 9000
const request = require('request');
var cors = require('cors')

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

app.get('/', (req, res) => {
  var value = req.query["value"]
  console.log(value);
  let ts = Date.now();

let date_ob = new Date(ts);
  // current hours
let hours = date_ob.getHours();

// current minutes
let minutes = date_ob.getMinutes();

// current seconds
let seconds = date_ob.getSeconds();
  console.log(hours + ":" + minutes + ":" + seconds);
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

El problema que tengo es que desde Google Chrome cuando accedo a localhost:3000/#/page1 y pulso el botón solo aparece en mi consola una vez el value enviado. En Firefox aparentemente parece que va bien pero al tiempo que sigo pulsando hay un momento en el que parece que peta y no se envían más.

Estoy empezando con react y con node y no se si estoy haciendo algo de manera incorrecta.

1
  • Las peticiones por lo general se manejan dentro de un useeffect de esta manera puedes controlar si se hace solo al montaje del componente o cuando cambie alguna variable de estado Commented el 21 mar. 2022 a las 9:46

1 respuesta 1

0

Me parece que el problema que tienes es que en el get() del backend no estas dando una respuesta, por lo que el frontend se quedará esperando a esa respuesta cada vez que hagas la petición. El get debería tener la respuesta así:

app.get('/', (req, res) => {
  var value = req.query["value"]
  console.log(value);
  let ts = Date.now();

let date_ob = new Date(ts);
let hours = date_ob.getHours();
let minutes = date_ob.getMinutes();
let seconds = date_ob.getSeconds();
console.log(hours + ":" + minutes + ":" + seconds);


res.send(value) //aqui das las respuesta al cliente, y como respuesta envias el value
});
1
  • Puede que fuera por eso, y por la pagina de react en la que estaba haciendo la petición. Resulta que si hacia la petición creando un componente app Content de la plantillla no pasaba este problema. Commented el 24 mar. 2022 a las 11:30

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.