Невозможно прочитать свойство ‘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}
  • }) }
) }
  • Как передать данные из дочернего компонента в родителя в ReactJS?
  • reactjs - Пользовательские компоненты JSX Не рендеринг
  • ReactJS Два компонента, сообщающие
  • Загрузка изображений на основе динамического пути в ReactJs
  • Что делает три точки в ReactJS
  • Как избежать привязки внутри метода рендеринга
  • Interesting Posts

    Ошибка использования сети 1219 – я просто хочу подключить сетевой ресурс

    Безлимитное переключение между областями DVD на MacBook Pro?

    Глупый полнотекстовый поиск?

    Восстановить данные с карты, которые невозможно прочитать

    декомпиляция DEX в исходный код Java

    Обмен Linux-сервером до полной загрузки памяти

    Табличное представление Javafx не показывает данные во всех столбцах

    Не удается завершить установку kali linux без cd или usb, но я не использую ни

    Каков правильный способ повторного прикрепления отдельных объектов в Hibernate?

    Как я могу избежать окна сообщения буфера обмена при копировании больших объемов данных в Excel?

    Мне нужно заменить мой процессор или материнскую плату, ПК не включается

    В Mac OS, что такое сочетание клавиш для переключения между окнами одного и того же приложения?

    Использование условного совпадения условно для определения того,

    Как разрешить удаленное подключение к mysql

    Как перенести приложение на фронт каждые 15 минут на Mac OS X Lion?

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