0
226
Vistas¿Cómo puedo enrutar con una matriz de objetos en Next JS?
He estado luchando para enrutar las páginas usando el siguiente método de consulta de ruta js. Estaba pasando una matriz de objetos sin procesar, pero quedó vacía en la página. He estado investigando y encontré una solución para usar JSON.stringify(result) y analizarlo en la otra página con JSON.parse(query.result) y esto funcionó. pero cuando uso este enfoque en la recarga de la página, la página falla y el navegador muestra el siguiente error.
This page isn't workingIf the problem continues, contact the site owner. HTTP ERROR 431 mi código en index.js es
<Link href={{ pathname: "/TvShows", query: { result: JSON.stringify(result), //result: [result], img: img, index: index, }}} //as={"/TvShows"} > y la página de destino es Tvshows.js
primero definí unas constantes
const [result, setResult] = useState([]); const [index, setIndex] = useState(""); const [img, setImg] = useState(""); const router = useRouter(); const query = router.query;después
useEffect (()=>{ if(router.isReady){ //console.log(result); const res = JSON.parse(query.result); setResult(res); setIndex(query.index); setImg(query.img); //console.log(res); //router.isReady= false; } },[router.isReady])el problema es cuando analizo fibrosamente estos JSON. ¿Por qué está pasando esto?
y NOTA: en la sección de URL de la página, usa los datos y es muy largo (tal vez si eso tiene algún efecto). ¿Cuál es la mejor manera de pasar una matriz a una página?
los datos locales que se pasan en JSON.strimgify(result)
const Shows = [ { id: 1, title: "title1", img: "imgURL", desc: "ddescription1" }, { id: 2, title: "title1", img: "imgURL", desc: "ddescription1" }, { id: 3, title: "title1", img: "imgURL", desc: "ddescription1" }, { id: 4, title: "title1", img: "imgURL", desc: "ddescription1" }, ] export default Shows;1 Respuestas
Responde la pregunta0
Curiosamente, no podía usar la palabra 'código' como parámetro de consulta en mi proyecto, así que le cambié el nombre a codeTerm. Primero, le sugiero que se mantenga alejado de algunas palabras clave como 'índice' o 'código', etc.
En su componente TvShows, intente consolar el objeto de consulta como se muestra a continuación
import { withRouter } from 'next/router'; const TvShows = (props) => { // the rest of your code useEffect(() => { console.log(props.router.query); if (props.router.query.result) console.log(JSON.parse(props.router.query.result)); }, [props.router]); // the rest of your code } export default withRouter(TvShows);no necesitas eso
const router = useRouter(); const query = router.query;ACTUALIZAR
¿Puede intentar enrutar al usuario usando next/router en lugar de next/link?
import Router from 'next/router'; Router.push( { pathname: '/TvShows', query: { result: JSON.stringify(result), img: img, index: index, }, } );Esto debería darte lo que quieres, aquí está el resultado.
