Tengo dos funciones axios configuradas en React. La primera función extrae una página para recuperar una lista de enlaces y devuelve aleatoriamente uno de esos enlaces. La siguiente función usa ese enlace como argumento para raspar esa página web y devuelve el título y el primer párrafo en una matriz. Entonces la segunda función depende de la primera.

Cuando trato de implementar esto usando el gancho useEffect , puedo hacer que funcione la primera función, pero la segunda función no recupera el enlace devuelto por la primera y da un error. Es como si el segundo no estuviera esperando que se devolviera el primero, a pesar de que usé await . ¿Alguien puede ayudarme a ver dónde me he equivocado?

 import getLink from "./getLink.js"; // Scrapes a page for an array of links, // returns one of those links randomly (string) import getPage from "./getPage.js"; // Scrapes the page from getLink, // returns [h1 text, p text] (array) import {useEffect,useState} from "react"; const Body = () => { const [text, setText] = useState([]); useEffect(() => { const getData = async () => { const link = await getLink(); const data = await getPage(link); setText(data); } getData(); }, []); return ( <div> <h1>{text[0]}</h1> <div dangerouslySetInnerHTML={{__html: text[1]}}></div> </div> ) } export default Body;

Mensaje de error : el acceso a XMLHttpRequest en 'enlace desde getLink' desde el origen 'http://localhost:3000' ha sido bloqueado por la política de CORS: No hay encabezado 'Access-Control-Allow-Origin' en el recurso solicitado.