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.