Tengo dos páginas en un proyecto Next.js, en la primera el usuario completa un formulario para crear una publicación, esa información se almacena en un objeto JSON que debe pasarse a la segunda página para que el usuario pueda ver una vista previa de la publicación y si le gusta, se crea la publicación.
El objeto es demasiado grande para pasarlo como parámetro de consulta (tiene alrededor de 25 elementos) pero no puedo encontrar cómo pasarlo a los accesorios de la segunda página.
La función que le da al objeto sus valores se ve así
async function submitHandler(event) { event.preventDefault(); validateAndSetEmail(); validateAndSetTitle(); validateAndSetSalary(); if (isFormValidated === true) { // this checks if the user has created another post const finalPostData = await checkExistence(Email); if (finalPostData["user"] === "usernot found") { setPostData({ title: Title, name: Name, city: City, email: Email, type_index: TypeNumber, type: Type, region_index: regionNumber, region: region, category_index: categoryNumber, category: category, range: Range, highlighted: highlighted, featured: featured, show_logo: showLogo, show_first: showFirst, description: Description, price: basePrice + cardPrice, website: Website, logo: Logo, application_link: applicationLink, time_to_pin: weeksToPin, pin: pin, post_to_google: shareOnGoogle, }); } else { setPostData({ // set other values to the object }); } // Here I want to do something like router.push({ pathname: "/preview/", post: PostData, }); } }La segunda página se parece a esto:
export default function PreviewPage(props) { const item = props.postInfo; // <= I want item to recieve the JSON object from the other page return ( <Fragment> <Navbar /> <div className="flex inline mt-12 ml-24"> <Card category={item.category} Name={item.company} logo={item.logo} City={item.company_city} Website={item.company_website} /> <Description title={item.job_title} description={item.description} category={item.category} region={item.region} Type={item.type} Link={item.link} /> </div> <Footer /> </Fragment> ); }Probar
router.push({ pathname: "/preview/", query: PostData, }); export default function PreviewPage() { const router = useRouter() const item = router.queryDespués de investigar React Context y Redux gracias al comentario de knicholas, logré encontrar una solución.
Creó un archivo de proveedor de contexto
Creo el Contexto con 2 cosas dentro:
Un objeto vacío que representa los datos de vista previa que se completarán más tarde
Una función de marcador de posición que se convertirá en el establecedor del valor.
import React from "react"; const PreviewContext = React.createContext({ Previewdata: {}, setPreviewData: (data) => {}, }); export default PreviewContext;Luego en _app.js
Cree una instancia de useState para almacenar los datos de vista previa y tenga una función para pasar a las otras páginas para establecer el valor cuando se complete el formulario, luego, envuelva el componente con el proveedor de contexto
function MyApp({ Component, pageProps }) { const [previewData, setPreviewData] = useState({}); return ( <div className=""> <PreviewContext.Provider value={{ previewData, setPreviewData }}> <Component {...pageProps} /> </PreviewContext.Provider> </div> ); } export default MyApp;En la página de formulario
Obtengo la función para establecer el valor de previewData usando useContext();
const { setJobPreviewData } = useContext(jobPreviewContext);Con eso, el valor de previewData está disponible en todas partes en la aplicación