Una vez que renderizo este componente funcional y abro la consola para verificar si los accesorios están presentes o no. La consola me muestra accesorios que contienen una matriz dos veces, pero la primera vez que la matriz impresa está vacía y la matriz que se imprimió la segunda vez contiene los datos. Estoy realmente confundido y no puedo depurar este error.
A continuación se muestra el código:
const MainConents = (props) => { console.log(props.details); return ( <> <div className="container" style={{marginTop : "20px"}}> <div className="row"> <div className="col-12"> // show single post in loop wise from database // show pagination for posts </div> </div> </div> </> ); } export default MainConents;La salida en mi navegador es:
los props se pasan desde un componente principal y creo que estos details se obtienen invocando un punto final de API.
Por lo tanto, durante la representación inicial, el servidor backend no respondió con una respuesta y, como resultado, mostrará una matriz vacía al principio (que es el valor inicial de props.details ). Pero cuando envía la respuesta, props.details ahora se actualiza y, como resultado, el componente secundario MainConents se volverá a procesar. Luego, mostrará la matriz actualizada en los registros de la consola.
Por lo tanto, inicialmente verá una matriz vacía y luego los props.details actualizados.
Si solo necesita imprimir la matriz cuando no está vacía. Entonces puedes poner una condición simple de la siguiente manera. (Pero no es necesario, porque los registros de la consola solo se usan con fines de depuración)
if(props.details.length > 0){ console.log(props.details); }