Aquí está el código:
import React from 'react'; import { Link } from 'react-router-dom'; import Main from '../layouts/Main'; import Cell from '../components/Stats/nCell'; import init from '../data/stats'; const promiseHandle = async () => { Window.data = await init(); }; promiseHandle(); const Stats = () => ( <Main title="Stats" description="Some statistics about Ahammad Shawki and ahammadshawki8.github.io" > <article className="post" id="stats"> <header> <div className="title"> <h2 data-testid="heading"><Link to="/stats">Publications</Link></h2> </div> </header> <p className="rec-p"> Please accept my sincere apologies for the inconvenience. At the moment, I am working on my Publication API for this website so may not be able to find all of my articles here. But the great news is that you can always read all of my articles on <a href="https://ahammadshawki8.hashnode.dev/">HashNode</a>. </p> </article> {Window.data.map((post) => ( <Cell data={post} key={post.title} /> ))} </Main> ); export default Stats;Como estoy trabajando con una promesa , aquí Window.data se ha declarado de forma asíncrona. Pero en reaccionar JSX {} , el código está sincronizado. Por lo tanto, se ejecuta antes de que se complete la promesa que causa el error. Quiero ejecutarlo después de la promesa. ¿Cómo resolver esto? Gracias por adelantado.
Debe mover la llamada dentro del componente y usar useEffect y useState o hacer una encuesta dentro del componente.
const Stats = () => { const [data, setData] = useState([]) useEffect( () => { const promiseHandle = async () => { setData(await init()); }; promiseHandle(); }, [])