Não é possível ler a propriedade ‘map’ de undefined em React

Eu tenho o seguinte componente que está sendo chamado de um componente de contêiner. O componente do contêiner transmite as transactions prop.

Eu sei que a propriedade de dados em prop está sendo passada in fine e tem dados e pode ser acessada a partir da chamada console.log. No entanto, quando tento mapear os dados e criar a lista, recebo um erro: Cannot read property 'map' of undefined

Aqui está como são os dados:

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

O que estou fazendo de errado?

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

Forneça uma verificação para prop.data indefinido e, em seguida, renderize o componente porque é possível que os props inicialmente não forneçam os dados, mas estejam disponíveis na segunda renderização. Isso deve resolver seu 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'));
   

É porque a renderização do componente ocorre antes do componente receber o array. Como opção, você pode definir o valor padrão de um suporte

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