Estoy tratando de conectarme a una base de datos MySQL y ejecutar una consulta dentro de una aplicación React después de hacer clic en un botón. De alguna manera da un error.
Mi código actual se ve así.
import mysql from 'mysql'; function App() { async function syncItems() { console.log("Sync function start test"); const connection = mysql.createConnection({ host: "localhost", user: "root", password: "", database: "vaxpass", port: "3306" }); await connection.promise.query('INSERT INTO records (nic) VALUES ("454534fsd");') console.log("Sync end test") // This part doesn't print } return ( <Button color="success" onClick={() => { syncItems(); }}> Sync </Button> ); }Una vez que hago clic en el botón Sincronizar , devuelve el siguiente error.
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'query') at syncItems (App.js:78:1) at Object.onClick (App.js:213:1) at Button.onClick (Button.js:42:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1) at executeDispatch (react-dom.development.js:8243:1) at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1) at processDispatchQueue (react-dom.development.js:8288:1) at dispatchEventsForPlugins (react-dom.development.js:8299:1) at react-dom.development.js:8508:1 at batchedEventUpdates$1 (react-dom.development.js:22396:1) at batchedEventUpdates (react-dom.development.js:3745:1) at dispatchEventForPluginEventSystem (react-dom.development.js:8507:1) at attemptToDispatchEvent (react-dom.development.js:6005:1) at dispatchEvent (react-dom.development.js:5924:1) at unstable_runWithPriority (scheduler.development.js:468:1) at runWithPriority$1 (react-dom.development.js:11276:1) at discreteUpdates$1 (react-dom.development.js:22413:1) at discreteUpdates (react-dom.development.js:3756:1) at dispatchDiscreteEvent (react-dom.development.js:5889:1)Estás mezclando el código frontend y el código backend aquí.
Su aplicación React se ejecuta en el navegador, mientras que su código de back-end se ejecuta en un tiempo de ejecución de NodeJS implementado en un servidor. El paquete mysql que está importando es un paquete NodeJS, que no puede ejecutarse en el navegador.
Debe diseñar su código en 2 partes: su código de back-end que usará algo como express para crear un punto final REST que pueda ser contactado por su segunda pieza de código: la aplicación React que usará la fetch de API del navegador para hacer solicitudes HTTP a tu back-end. En su código de backend, se conectará a la base de datos MySQL para poder almacenar los datos que recibe en su punto final.
Puede echar un vistazo a muchos tutoriales en línea para crear una aplicación web. Aquí hay un ejemplo de un tutorial de este tipo que elegí al azar en Google: Cómo crear una aplicación React con un backend de nodo . Puede encontrar muchos otros, utilizando diferentes tipos de medios (blog, podcast, video, etc.).