Estoy obteniendo publicaciones de WordPress de forma asíncrona a través getStaticProps() ...
export async function getStaticProps({ params, preview = false, previewData }) { const data = await getPostsByCategory(params.slug, preview, previewData) return { props: { preview, posts: data?.posts }, } } ... y pasándolos a useState :
const [filteredArticles, setFilteredArticles] = useState(posts?.edges)Luego, paso el estado a un componente:
router.isFallback ? ( // If we're still fetching data... <div>Loading…</div> ) : ( <ArticleGrid myArticles={filteredArticles} /> Esto es necesario porque otro componente setFilteredArticles con una función de filtro.
Pero cuando pasamos el estado a ArticlesGrid , los datos no están listos cuando se carga el componente. Esto es confuso para mí ya que pasamos el estado dentro de una condición router.isFallback .
Incluso si establecemos el estado dentro de useEffect ...
const [filteredArticles, setFilteredArticles] = useState() useEffect(() => { setFilteredArticles(posts) }, [posts?.edges])... los datos llegan demasiado tarde para el componente.
Soy nuevo en Next.js. Probablemente pueda abrirme camino a través de esto, pero supongo que hay una solución elegante.
Veamos algunos ejemplos de useEffect :
useEffect(() => { console.log("Hello there"); }); Este useEffect se ejecuta después del primer renderizado y en cada renderizado subsiguiente.
useEffect(() => { console.log("Hello there once"); }, []); Este useEffect se ejecuta solo una vez, después del primer render .
useEffect(() => { console.log("Hello there when id changes"); }, [props.id]); Este useEffect se ejecuta después del primer render , cada vez que cambia props.id .
Algunas posibles soluciones a su problema:
Caso sin artículos
Probablemente desee tratar este caso en su componente ArticleGrid de todos modos, para evitar posibles errores.
En ArticleGrid.js:
const {myArticles} = props; if(!myArticles) { return (<div>Your custom no data component... </div>); } // normal logic return ...Alternativamente, también podría tratar este caso en el componente principal:
{ router.isFallback ? ( // If we're still fetching data... <div>Loading…</div> ) : ( <> { filteredArticles ? <ArticleGrid myArticles={filteredArticles} /> : <div>Your custom no data component... </div> } </> ) }Usa apoyos iniciales
Envía los accesorios iniciales en caso de que no se hayan configurado los filtros:
const myArticles = filteredArticles || posts?.edges;y entonces:
<ArticleGrid myArticles={myArticles} />