Soy nuevo en React y estoy tratando de seguir este tutorial para crear una página simple usando React y Express. La página tiene un estado de 0 y un botón, de modo que cada vez que se presiona el botón, el estado se incrementa en uno. Además, he pasado unos accesorios que también estoy tratando de mostrar.
Así es como se ve el código de reacción:
import React from "react"; export default function Test(props) { const [number, setNumber] = React.useState(0); function add() { console.log(number); setNumber((number) => number + 1); } return ( <div> {props.number} <br /> <button onClick={add}>Click Me</button> <p>{number}</p> </div> ); }El problema es que props.number aparece solo momentáneamente y luego desaparece. El botón parece funcionar bien.
<!DOCTYPE html> <html> <body> <div id="body"> <%- reactApp %> </div> <script src="/bundles/test.js" charset="utf-8"></script> <script src="/bundles/vendor.js" charset="utf-8"></script> </body> </html>Comentar el paquete para test.js hace que aparezcan los accesorios, pero eso significaría que el botón no funcionará.
Aquí está el enlace a la caja de arena . ¿Cómo muestro el estado y los accesorios juntos?
Editar: para ejecutar el código, primero use npm run webpack en una terminal y luego npm start en una terminal diferente