Estoy tratando de construir una página web simple usando React y Express. La página consta de un botón y un número que debe incrementarse al hacer clic en el botón. He usado el estado del número para realizar un seguimiento del valor que se mostrará y pasé el componente a mi archivo ejs. Aquí están los códigos de referencia.
El componente de reacción test.jsx
import React from "react" export default function Test(){ const [number, setNumber] = React.useState(0); function add(){ console.log(number) setNumber(number => number+1) } return( <div> <button onClick={add}>Click Me</button> <p>{number}</p> </div> ) }Luego estoy pasando este componente a mi archivo ejs a través de mi archivo de enrutador
prueba.js
import React from "react" import express from "express" import {renderToString} from "react-dom/server.js" import Test from "./test.jsx" const router = express.Router(); router.get('/test', (req, res, next) => { const reactComp = renderToString(<Test/>); res.render("./test", {reactApp: reactComp}); }) module.exports = router;prueba.ejs
<!DOCTYPE html> <html> <body> <div id="body"> <%- reactApp %> </div> </body> </html>El problema es que la página se procesa pero el botón no parece funcionar. La función de agregar nunca se llama ya que no hay registros. ¿Tiene algo que ver con el hecho de que estoy renderizando a través de un archivo ejs? ¿Cómo hago que esto funcione?
¿Por qué no usas axios? o construir un cliente para hacer las solicitudes