0
253
Viewspasando la identificación a través del enlace a getServerSideProps: siguiente js
Tengo algunos componentes de alerta. de cada uno de los componentes quiero pasar el itm._id
y recibirlo en [itm].jsx en la misma carpeta en [itm].jsx quiero usarlo en la función getServerSideProps para obtener datos
índice.jsx
<div className="question11"> {data.map((itm) => ( <Link key={itm._id} href={{ pathname: "/[itm]", query: itm._id, }} as={`/${encodeURIComponent( itm.Name.replace(/[^a-zA-Z0-9 - _ . ~]/g, "").replace( / /g, "-" ) )}`} > <Alert className="question13">{itm.Name}</Alert> </Link> ))} </div>fluyendo es la función getServerSideProps, el error que ahora recibo es que
Server Error FetchError: invalid json response body at https://askover.wixten.com/questone/[object%20Object] reason: Unexpected token < in JSON at position 0
Creo que el error es que la identificación se recibe como objeto. ¿Cómo soluciono esto?
[itm].jsx
export async function getServerSideProps(query) { var id1 = query; console.log(id1); const queryRequest = fetch("https://askover.wixten.com/questone/" + id1).then( async (res) => await res.json() ); const answerRequest = fetch( "https://askover.wixten.com/answersapi/" + id1 ).then(async (res) => await res.json()); const responses = await Promise.all([queryRequest, answerRequest]); const [posts, answerPosts] = await Promise.all(responses); return { props: { posts, answerPosts, }, }; } 
3 answers
Answer question0
Pruebe esto: en la consulta de pase de etiqueta de enlace como
<div className="question11"> {data.map((itm) => ( <Link key={itm._id} href={{ pathname: "/[itm]", query: {id: itm._id}, }} as={`/${encodeURIComponent( itm.Name.replace(/[^a-zA-Z0-9 - _ . ~]/g, "").replace( / /g, "-" ) )}`} > <Alert className="question13">{itm.Name}</Alert> </Link> ))} </div>Y en getserversideprops puedes acceder así
export async function getServerSideProps(context) { console.log(contex.params.id) //If doesn't work use context.query.id }0
Tienes que recibir itm de consulta como a continuación. consulta en sí mismo un objeto. Dentro del objeto, su variable de ruta existe como su nombre de archivo dinámico. Está obteniendo datos por objeto. tiene que buscar datos por alias de itm como id1 .
export async function getServerSideProps({ query }) { var {itm: id1} = query; ... return { props: { posts, answerPosts, }, }; }0
Si ve la documentación de getServerSideProps , verá que el parámetro se llama context : este es un objeto, no la identificación que espera.
https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props
export async function getServerSideProps(context) { return { props: {}, // will be passed to the page component as props } }Cotizar:
El parámetro de contexto es un objeto que contiene las siguientes claves:
- req: El objeto HTTP IncomingMessage.
- res: el objeto de respuesta HTTP.
- consulta: un objeto que representa la cadena de consulta.
(otros eliminados)
Por lo tanto, sus parámetros de consulta estarán en context.query .
Prueba esto:
export async function getServerSideProps(context) { const query = context.query console.log(query?.itm); // ^ } Nombró el parámetro de consulta itm (ya que el archivo se llama [itm].tsx), por lo que context.query.itm debería darle el valor que necesita. Compruebe en la consola antes de agregar la URL.