0
150
Vistas¿Cómo puedo obtener datos de mongoDB y mostrarlos en la interfaz de reacción?
Soy nuevo en MERN y lo estoy aprendiendo. No sé cómo obtener todos los datos de una colección específica y mostrar los datos de cada registro en tarjetas separadas. Desarrollé el código de back-end y funciona perfectamente cuando envío solicitudes a través del cartero, pero obtener y mostrar datos de la aplicación React es un problema para mí. ¿Cómo puedo hacer eso?
Mi código API backend
router.get('/ads', async (req,res,next)=>{ try{ const ads = await Ads.find(); return res.status(200).json({ success: true, count: ads.length, data: ads, }); } catch(err) { console.log(err); res.status(500).json({ error: 'server error' }); } }); 
3 Respuestas
Responde la pregunta0
Hay muchas formas de consultar para obtener datos de su servidor API. así que aquí estoy tratando de describir dos de ellos.
1. Por navegador nativo Fetch API:
const AdsContainer = ({children}) => { const [data, setData] = useState(); useEffect(() => { fetch('/ads').then(response => { setData(response.json()) }) }, []) return ( <AdsComponent data={data}> {children} </AdsComponent> ) } 2. por react-query :
Esto le dará un manejo más sincronizado como loading , Error , almacenamiento en Caching y más.
Primero, en el nivel superior de su app , debe proporcionarlo.
import { QueryClient, QueryClientProvider } from "react-query"; import AdsContainer from "./AdsContainer"; const queryClient = new QueryClient() function App() { return ( <QueryClientProvider client={queryClient}> <div className="App"> <AdsContainer /> </div> </QueryClientProvider> ); } Entonces su AdsContainer podría obtener datos de la siguiente manera:
import {useQuery} from "react-query"; const AdsContainer = ({children}) => { const query = useQuery('todos', () => { return fetch("/ads").then(response => { return response.json() }) }) /* logics that depends on your data * userEffect(() => {}, [data.length]) */ return ( <AdsComponent data={query.data}> {children} </AdsComponent> ) }0
Simplemente use la biblioteca AXIOS para hacer sus llamadas REST en el front-end. Lo que creó en su proyecto nodejs es solo un punto final, ahora tendrá que hacer una llamada API al punto final desde el front-end.
Answer by Heartbit también es apto, pero normalmente en React, los desarrolladores usan la biblioteca AXIOS para el resto de las llamadas a la API.
Lea los documentos aquí: https://www.npmjs.com/package/axios
Mientras comienza, mire un tutorial sobre AXIOS si la documentación es demasiado para usted.
Después de importar Axios, dentro del gancho useEffect, debería estar escribiendo algo como esto:
axios.get('/ads') .then(function (response) { // handle success console.log(response); }) .catch(function (error) { // handle error console.log(error); }) .then(function () { // always executed });0
Te recomiendo que instales axios.
- Más información https://www.npmjs.com/package/axios
- Usando:
useEffect(() => { const getAds = async () => { const res = await axios.get('/ads') console.log(res.data) } getAds() }, [])