Oye, tengo un pequeño web scraper en mi backend usando express.js
const scrapeMetatags = (text) => { const urls = Array.from( getUrls(text) ); const requests = urls.map(async url => { const res = await fetch(url); const html = await res.text(); const $ = cheerio.load(html); const getMetatag = (name) => $(`meta[name=${name}]`).attr('content') || $(`meta[name="og:${name}"]`).attr('content') || $(`meta[name="twitter:${name}"]`).attr('content'); return { url, title: $('title').first().text(), favicon: $('link[rel="shortcut icon"]').attr('href'), // description: $('meta[name=description]').attr('content'), description: getMetatag('description'), image: getMetatag('image'), author: getMetatag('author'), } }); return Promise.all(requests); } app.get("/scraper/:link", async (req, res) => { const {link} = req.params; const body = link const data = await scrapeMetatags(body) res.json(data) })Luego, en mi frontend/react, lo llamo así:
const [websitedescription, setwebsitedescription] = useState(null) useEffect(() => { async function scraper() { const response = await fetch(`http://localhost:5000/scraper/${scraperlink}`) const data = await response.json() console.log(JSON.stringify(data)) const websitedescription = data[0].description console.log(websitedescription) const logolink = data[0].favicon setwebsitedescription(websitedescription) } scraper() }, [scraperlink])El problema con el que me estoy topando es que estoy recibiendo un
TypeError no capturado (en promesa): no se pueden leer las propiedades de undefined (leyendo 'descripción') en el raspador
justo antes de que se completen los datos. Lo cual creo que podría deberse a que mi componente se procesa antes de que la API tenga tiempo de completar los datos. Puedo confirmar que los datos realmente se llaman mirando en la consola. He puesto el objeto devuelto en forma de cadena para que pueda saber qué significa.
Como puede ver, el error ocurre justo antes de que se devuelvan/llenen los datos. ¿Qué puedo hacer para arreglar esto? gracias de antemano