Tengo el siguiente componente que se llama desde un componente contenedor. El componente de contenedor pasa la propiedad de transacciones.
Sé que la propiedad de datos en prop se está pasando bien y tiene datos y se puede acceder desde la llamada console.log. Sin embargo, cuando intento 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 ( <ul> { props.data.map(function(el,index) { return <li key={index}>{el.category}</li> }) } </ul> ) }Proporcione una verificación de prop.data no definidos y luego represente 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 ( <div ><TransactionManagerView data={data}/></div> ) } } const TransactionManagerView = function(props) { console.log(props.data); return ( <ul> { props.data && props.data.map(function(el,index) { return <li key={index}>{el.category}</li> }) } </ul> ) } ReactDOM.render(<App/>, document.getElementById('app')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> <div id="app"></div>Es porque la representación del componente ocurre antes de que el componente reciba la matriz. Como 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 ( <ul> { data.map(function(el,index) { return <li key={index}>{el.category}</li> }) } </ul> ) }