Невозможно прочитать свойство ‘map’ неопределенного в React

У меня есть следующий компонент, который вызывается из компонента контейнера. Контейнерный компонент передает поддержку транзакций.

Я знаю, что свойство data в prop передается в порядке и имеет данные и может быть доступно из вызова console.log. Однако, когда я пытаюсь отобразить данные и создать список, я получаю сообщение об ошибке: Cannot read property 'map' of undefined

Вот как выглядят данные:

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

Что я делаю не так?

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

2 Solutions collect form web for “Невозможно прочитать свойство ‘map’ неопределенного в React”

Предоставьте проверку на неопределенные prop.data а затем визуализируйте компонент, потому что возможно, что реквизит изначально не предоставляет данные, но доступен во втором рендере. Это должно решить вашу проблему

 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'));
   

Это связано с тем, что рендеринг компонента происходит до того, как компонент получит массив. В качестве опции вы можете установить значение по умолчанию для опоры

 import React from 'react'; export default function TransactionManagerView ({data = [], ...props}) { console.log(props.data); return ( 
    { data.map(function(el,index) { return
  • {el.category}
  • }) }
) }
  • Простой компонент не рендеринг: React js
  • Как сделать setState внутри обратного вызова: ReactJS
  • Почему рекомендации React рекомендуют делать AJAX в componentDidMount, а не componentWillMount?
  • Как передать данные из дочернего компонента в родителя в ReactJS?
  • Контекст доступа к контексту вне функции рендеринга
  • setState не обновляет состояние сразу
  • Почему и когда нам нужно связывать функции и eventHandlers в React?
  • Что такое mapDispatchToProps?
  • Передайте несколько параметров обработчикам событий в React
  • Что такое использование Curly Braces в заявлении импорта ES6
  • responsejs, дающий ошибку Uncaught TypeError: Супер выражение должно быть либо null, либо функцией, а не неопределенной
  • Interesting Posts

    Экспорт служб отчетов в Excel с несколькими рабочими листами

    Есть ли способ использовать разрешение дисплея выше максимального?

    Как «застегнуть» или «повернуть» переменное количество списков?

    Как отключить автоматический вход последнего активного пользователя в Windows 8.1?

    Любой способ заставить панель задач Windows спрятаться (если в режиме «автоматического скрытия»)

    Как я могу спрятать всю систему?

    Удаление открытого сеанса из dvd-rw

    Автоматическое резервное копирование файлов после внесения изменений

    Как изменить проект по умолчанию Eclipse в проект Java

    Как выполнить команды cmd через Java

    Языковые горячие клавиши удалены сами по себе в Windows 10

    Partclone.btrfs тысячи исправляемых ошибок csum

    Что такое эквивалент async / await сервера ThreadPool?

    Java ассоциативный массив

    Нужно ли создавать сети 2,4 и 5 ГГц вручную с двухдиапазонным аэропортом Extreme?

    Давайте будем гением компьютера.