0

Actualmente estoy haciendo una tarea donde ya estoy implementando BD en React, como tal ya hice un componente llamado conector el cual me conecta a mi base de datos, este es el ejemplo de como lo hice:

const mysql = require('mysql2');


// Configuración de la conexión a la base de datos
const connection = mysql.createConnection({
host: 'nombreAleatorio',
user: 'user',
password: '123456789',
port: 3300,
database: 'restaurante'
});

 // Conexión a la base de datos
connection.connect((err) => {
if (err) {
    console.error('Error al conectar a la base de datos: ', err);
    return;
}
console.log('Conexión exitosa a la base de datos');


});

en ese ejemplo que di ya logre hacer una consulta y me mostro todos mis datos, pero mi duda principal si es necesario volver a hacer la conexion con cada componente que lo necesite utilizando como ejemplo mi componente eliminar

el siguiente es mi componente eliminar:

import React, { useState } from 'react';
import './Styles/EliminarPlatillo.css';

const EliminarPlatillo = () => {
const [producto, setProducto] = useState('');

const buscarProducto = () => {
    // aqui tenemos que poner la logica para la basew de datos

    if (producto == "nada"){
        alert('no existe');
    } else{
        setProductoEncontrado(producto); //solo puse prodcuto para que que si 
    funciuone
    }

    };

    const confirmarEliminacion = () => {
     // aqui va la logica para eliminar desde base de datos
    alert('eliminado');
    };

    return (
    <div className="eliminar-platillo-container">
        <div className="eliminar-platillo-left">
            <input
                type="text"
                value={producto}
                onChange={(e) => setProducto(e.target.value)}
                placeholder="Ingrese el nombre del producto"
            />
            <button onClick={buscarProducto}>Buscar</button>
        </div>
        <div className="eliminar-platillo-right">
            <p>{productoEncontrado}</p>
            <button onClick={confirmarEliminacion}>Confirmar Eliminación</button>
        </div>
    </div>
    );
    };

    export default EliminarPlatillo;

en ese componente es donde tengo que solicitar algunos datos para despues poder eliminarlos de la BD , pero mi duda radica aqui, si es necesario volver a hacer la conexion o se puede usar la misma conexion que hice anteriormente, y como podria implementarlo en este componente aqui.

1 respuesta 1

0

En una aplicación de React, no es recomendable establecer directamente una conexión a la base de datos en cada componente. En su lugar, debes manejar la conexión a la base de datos en el lado del servidor, y luego utilizar una API para comunicarte con el servidor desde tus componentes de React.

Aquí hay una estructura básica que puedes seguir:

Configura un servidor en el lado del backend utilizando una tecnología como Node.js, Express, u otro framework de tu elección. Este servidor será responsable de establecer y manejar la conexión a la base de datos.

Crea una API en el servidor para manejar las operaciones de la base de datos, como crear, leer, actualizar y eliminar registros. Utiliza librerías como mysql2, sequelize, knex, o cualquier otra que prefieras para interactuar con la base de datos desde el servidor.

Desde tu componente de React, realiza solicitudes HTTP (por ejemplo, utilizando fetch o una librería como axios) a las rutas de la API para comunicarte con el servidor y realizar operaciones en la base de datos.

Aquí hay un ejemplo simplificado de cómo podrías implementar la eliminación de un registro utilizando una API en React:

En el lado del servidor (Node.js), configura una ruta para manejar la eliminación de un producto:

// app.js (backend)
const express = require('express');
const app = express();

app.delete('/productos/:id', (req, res) => {
  const productId = req.params.id;
  
  // Aquí debes implementar la lógica para eliminar el producto de la base de datos
  
  res.status(200).json({ message: 'Producto eliminado exitosamente' });
});

app.listen(8000, () => {
  console.log('Servidor escuchando en el puerto 8000');
});

En tu componente de React, realiza la solicitud de eliminación al servidor cuando el usuario confirme la eliminación:

import React, { useState } from 'react';
import axios from 'axios';

const EliminarPlatillo = () => {
  const [producto, setProducto] = useState('');

  const buscarProducto = () => {
    // Aquí debes implementar la lógica para buscar el producto en la base de datos
  };

  const confirmarEliminacion = () => {
    axios
      .delete(`/productos/${producto}`)
      .then((response) => {
        alert(response.data.message);
      })
      .catch((error) => {
        console.error('Error al eliminar el producto:', error);
      });
  };

  return (
    <div className="eliminar-platillo-container">
      {/* Resto del código de tu componente */}
    </div>
  );
};

export default EliminarPlatillo;

En este ejemplo, se realiza una solicitud DELETE al endpoint /productos/:id en el servidor cuando el usuario confirma la eliminación. El :id en la ruta se reemplaza con el ID del producto que deseas eliminar. En el servidor, debes implementar la lógica para eliminar el producto correspondiente de la base de datos.

Recuerda que este es solo un ejemplo básico y es necesario adaptarlo a tu configuración específica del servidor y la base de datos. Además, asegúrate de aplicar medidas de seguridad adecuadas, como validar y sanitizar los datos de entrada antes de realizar operaciones en la base de datos.

1
  • 2
    Copión de chatGPT. Vergüenza Commented el 19 jun. 2023 a las 5:56

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.