Estoy tratando de pasar objetos de una matriz en otra página usando router.query , los objetos individuales como router.query.title funcionan bien, pero cuando se trata de matrices como router.query.reviews , devuelve algo como esto reviews: ['', '', '', '', '', '', '', ''] . Intenté usar router.isReady pero nada parece cambiar
Objeto de ejemplo en la matriz
{ title: "Center-Hall", reviews: [ { title: "Wislong Chew", comment: "jsdncjnsd csdncjds csjcnsdj csjdcn cdc djndc", }, { title: "Wisdsdlong Chew", comment: "jsdncjnsd csdncjds csjcnsdj csjdcn cdc djndc", }, ], },Padre
{array.map((item) => ( <Grid key={item} item> <Card label={item.title} onClick={() => router.push({ pathname: "/page", query: { title: item.title, reviews: item.reviews, }, }) } /> </Grid> ))}Siguiente página
function index() { const router = useRouter(); useEffect(() => { if (!router.isReady) return; console.log(router.query); }, [router.isReady]); const Reviews = () => <ReviewCard reviewsList={router.query.reviews} /> ); return ( <Box> <Typography>{router.query.title}</Typography> <Reviews /> </Box> ); } export default index;Cuando pasa una matriz usando router.query a otra página, analícela en una cadena json usando el método JSON.stringify y en la página siguiente analice la cadena en una matriz usando el método JSON.parse
{array.map((item) => ( <Grid key={item} item> <Card label={item.title} onClick={() => router.push({ pathname: "/page", query: { title: item.title, reviews: JSON.stringify(item.reviews), }, }) } /> </Grid> ))} function index() { const router = useRouter(); useEffect(() => { if (!router.isReady) return; console.log(router.query); console.log(JSON.parse(router.query.reviews)) }, [router.isReady]); const Reviews = () => <ReviewCard reviewsList={JSON.parse(router.query.reviews)} /> ); return ( <Box> <Typography>{router.query.title}</Typography> <Reviews /> </Box> ); } export default index;Ocurre cuando el elemento de la matriz es un objeto JSON. Puede pasar una matriz pero no una matriz de objetos.
router.push({ pathname: "/planterupdate", query: { title: "test", textArray: ["1","2","3","4"],//will work reviews: [{num:1},{num:2},{num:3},{num:4}],//will not work numArray: [5,6,7,8],//will work }, })Ejemplo de registro de consulta {título: 'prueba', textArray: Array(4), revisiones: Array(4), numArray: Array(4)} numArray: (4) ['5', '6', '7', '8'] reseñas: (4) ['', '', '', ''] textArray: (4) ['1', '2', '3', '4'] título: "prueba"