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> ) }

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 });

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() }, [])