No se puede leer la propiedad ‘mapa’ de indefinido en React

Tengo el siguiente componente que se llama desde un componente contenedor. El componente contenedor pasa las transacciones prop.

Sé que la propiedad de datos en prop está siendo aprobada y tiene datos y se puede acceder desde la llamada console.log. Sin embargo, cuando trato de mapear los datos y crear la lista, aparece un error: Cannot read property 'map' of undefined

Así es como se ven los datos:

 [ {"transid":3426,"acct":"acct1","category":"Auto"}, {"transid":3427,"acct":"acct2","category":"Subscriptions"} ] 

¿Qué estoy haciendo mal?

 import React from 'react'; export default function TransactionManagerView (props) { console.log(props.data); return ( 
    { props.data.map(function(el,index) { return
  • {el.category}
  • }) }
) }

Proporcione un control para prop.data indefinido y luego renderice el componente porque es posible que los accesorios inicialmente no proporcionen los datos, pero están disponibles en el segundo procesamiento. Eso debería resolver tu problema

 class App extends React.Component { render() { var data = [ {"transid":3426,"acct":"acct1","category":"Auto"}, {"transid":3427,"acct":"acct2","category":"Subscriptions"} ] return ( 
) } } const TransactionManagerView = function(props) { console.log(props.data); return (
    { props.data && props.data.map(function(el,index) { return
  • {el.category}
  • }) }
) } ReactDOM.render(, document.getElementById('app'));
   

Es porque la representación del componente ocurre antes de que el componente reciba la matriz. Como una opción, puede establecer el valor predeterminado de un accesorio

 import React from 'react'; export default function TransactionManagerView ({data = [], ...props}) { console.log(props.data); return ( 
    { data.map(function(el,index) { return
  • {el.category}
  • }) }
) }