Estoy tratando de hacer una llamada API simple usando Node.js como backend y React en la interfaz. Mi archivo Node.js no devuelve datos en JSON y no estoy seguro de por qué. Necesito ayuda en 2 cosas:
Mensaje de error:
react-dom.development.js:14757 Error no detectado: los objetos no son válidos como hijos de React (encontrado: [promesa de objeto]). Si tenía la intención de representar una colección de niños, use una matriz en su lugar. en throwOnInvalidObjectType (react-dom.development.js:14757:1) Código utilizado en el backend:
const http = require("http"); let user={"name":"Leo"}; var server = http.createServer(function(req ,res){ res.writeHead(200, {'Content-Type': JSON}); res.json([{ number: 1, name: 'CR7', gender: 'male' }, { number: 2, name: 'LEO', gender: 'male' } ]); res.end(" done"); }); server.listen(8000);Código en la interfaz (Reaccionar):
import "./index.css"; function App() { return ( <div className="App"> <header className="App-header"> <form> <div> <div className="form-group"> <label htmlFor="exampleInputEmail1">Email address</label> <input type="email" className="form-control" /> <small className="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div className="form-group"> <label>Password</label> <input type="password" className="form-control"/> </div> <div className="form-group form-check"> <input type="checkbox" className="form-check-input" /> <label className="form-check-label" >Check me out</label> </div> <button type="submit" onClick="{fetcher()}" className="btn btn-primary">Submit</button> </div> </form> {//using state } function fetcher(){ fetch("https://localhost:8000/user.name",{ headers : { 'Content-Type': 'application/json', 'Accept': 'application/json' } }) .then((data)=>{return data.json()})Content-Type debe ser application/json en el código del servidor.
Cambie onClick="{fetcher()}" a onClick="{fetcher}" , porque desea que se llame solo cuando haga clic en el botón, no inmediatamente al renderizar. También recomiendo mover la función arriba de su return , para organizar mejor su código. Como Senthil mencionó anteriormente, es posible que también deba usar http y no https en su llamada a la API.
Use http para llamar al servicio local http://localhost:8000/ . Prueba del lado del servidor, es decir, llamada de servicio de nodo en cartero o solicitud de curl. ex. curl -I http://localhost:8000/ antes de integrarse con React.
Hay algún error en su script de nodo. res.json está disponible en el módulo de nodo express pero no en el módulo http.
Vea el código actualizado y la salida de muestra
const http = require("http"); let user={"name":"Leo"}; var server = http.createServer(function(req ,res){ res.writeHead(200, {'Content-Type': JSON}); //res.json(); res.end(JSON.stringify([{ number: 1, name: 'CR7', gender: 'male' }, { number: 2, name: 'LEO', gender: 'male' } ])); }); server.listen(8000)Salida de muestra:
curl http://localhost:8000/ [{"number":1,"name":"CR7","gender":"male"},{"number":2,"name":"LEO","gender":"male"}]%