0

Estoy en un proyecto con amigos y uno se encarga de montar el servidor y yo de mandar la info al servidor lo estamos guardando todo en json (por ahora) la cosa es que no consigo que mi componente de react le envia la informacion al server El servidor:

const express = require('express');
const path = require('path');
const fs = require('fs');
const cors = require('cors'); // Importa el módulo CORS

const app = express();
const port = 1221; // Puerto para el servidor backend

// Middleware para permitir solicitudes desde cualquier origen
app.use(cors());

// Middleware para servir archivos estáticos desde el directorio 'backend/public'
app.use(express.static(path.join(__dirname, 'public')));

// Endpoint para servir el archivo JSON
app.get('/bp-data-json', (req, res) => {
  const jsonPath = path.join(__dirname, 'bp-data.json'); // Ruta al archivo JSON en backend
  fs.readFile(jsonPath, 'utf8', (err, data) => {
    if (err) {
      console.error('Error leyendo el archivo JSON:', err);
      res.status(500).send('Error interno del servidor');
      return;
    }
    res.json(JSON.parse(data));
  });
});

// Iniciar el servidor
app.listen(port, () => {
  console.log(`Servidor backend escuchando en http://localhost:${port}`);
});

Mi componente de prueba para intentar meter el json

import React from "react";

const enviarJSON = (jsonData) => {
  const requestOptions = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(jsonData),
  };

  fetch("http://localhost:3001/prueba-json", requestOptions)
    .then((response) => {
      if (!response.ok) {
        throw new Error("Error al guardar el JSON en el servidor");
      }
      console.log("JSON guardado correctamente en el servidor");
    })
    .catch((error) => {
      console.error("Error al guardar JSON:", error);
    });
};

const CrearYEnviarJSON = () => {
  const handleClick = () => {
    const jsonData = {
      elemento1: "valor1",
      elemento2: "valor2",
    };

    enviarJSON(jsonData);
  };

  return (
    <div>
      <button className="bg-white" type="button" onClick={handleClick}>
        Enviar JSON
      </button>
    </div>
  );
};

export default CrearYEnviarJSON;

import React from "react";

const enviarJSON = (jsonData) => {
  const requestOptions = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(jsonData),
  };

  fetch("http://localhost:3001/prueba-json", requestOptions)
    .then((response) => {
      if (!response.ok) {
        throw new Error("Error al guardar el JSON en el servidor");
      }
      console.log("JSON guardado correctamente en el servidor");
    })
    .catch((error) => {
      console.error("Error al guardar JSON:", error);
    });
};

const CrearYEnviarJSON = () => {
  const handleClick = () => {
    const jsonData = {
      elemento1: "valor1",
      elemento2: "valor2",
    };

    enviarJSON(jsonData);
  };

  return (
    <div>
      <button className="bg-white" type="button" onClick={handleClick}>
        Enviar JSON
      </button>
    </div>
  );
};

export default CrearYEnviarJSON;

```hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhuuh huhuh uh uh uh uhh

1 respuesta 1

0

En el servidor ya definieron las rutas post? porque en el codigo que propocionaste solo veo una ruta get definida, a parte en tu componente de React te pudes crear un hook personalizado el cual maneje el estado de tu query al servidor asi sabes si esta cargando la solicitud al servidor, si dejo de cargar pero hubo un error o si cargo y llegaron los datos, esto lo puedes manejar con un useState.

ejemplo:

  ``` 

/*archivo donde creas tu hook*/
import useState from 'react'
const usefetch = (url: srting)=>{
const stateInitial = {
  isLoading= null,
  data= null, 
  error, null
}
const [data, setData] = useState(stateInitial)
  const customQuery = (url, body, options)=>{
    // aca manejas el fetch personalizado, lo puedes mejorar a tu gusto 
  } 
  try{
    if(!url) return [data, custonQuery] 
  }
  catch(e){}
}



/* archivo donde haces el la query*/
const [{data, isLoading, error}, customQueryServer] = usefetch<string>('url')

// esto si se quiere que nomás cargue el componente se haga el fetch

// si se quiere realizar en un boton como le haces tu puedes usar una funcion que estarias retornando desde el mismo hook tal cual como en el ejemplo anterior con customQueryServer

const handleClick = () =>{
  customQueryServer<string>('url')
}
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

Y por ultimo que tambien lo acabo de notar las rutas de prueba tanto en el back como en el front son distintas, te recomiendo verificar estas cosas.

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.