Tengo un problema al renderizar una página dinámica en NEXT.JS. Al hacer clic en un elemento de la lista SÍ me redirige a la página de detalles , los datos en la página de detalles aún no están disponibles.

Obtengo el poData en la página de detalles, y si trato de iniciar sesión en la consola, funciona perfectamente y cierra la sesión de todas las claves que contiene.

Sin embargo, cuando trato de representar las claves individuales en poData , por ejemplo, poData.refId , aparece un error que dice que no se puede leer refId de undefined . (línea 30)

( refId es también el pageId utilizado en la redirección que prueba que los datos son válidos) Esto no tiene sentido porque en la línea 29, el poData se registra en la pantalla y no arroja el error.

Además, si solo registro el poData sin intentar acceder a los datos anidados en el objeto, puedo ver el objeto que contiene todos los datos anidados cuando está conectado en la pantalla.

Código de segmento Redux:

 import { createSlice } from "@reduxjs/toolkit"; import purchaseOrdersDb from '../../db/purchaseOrders' const initialState = [ ]; const poSlice = createSlice({ name: "po", initialState, reducers: { addPO(state, action) { // Check PO List for duplicates const duplicateIndex = state.findIndex(el => el.refId === action.payload.refId) // Add the new PO duplicateIndex < 0 ? state.push(action.payload) : console.log(`Duplicate Found`);; }, }, }); export const poActions = poSlice.actions; export default poSlice;

Código de componente:

 /* Next Functions */ export async function getStaticPaths() { return { paths: [ { params: { refId: '1' } } ], fallback: 'blocking' } } export async function getStaticProps(context) { const pid = context.params.refId; return { props: { pid } } } /* Page Component Function */ export default function POdetail(props) { const poData = useSelector(state => { return state.po.find(item => item.refId === props.pid) }) poData && console.log(poData); poData.refId && console.log(poData.refId); return ( <> <h1>{poData.refId} </h1> </> ) }