Неправильная интеграция в реквизиты React

Я пытаюсь реализовать свое первое приложение React-Redux и получил TypeError: Cannot read property 'map' of undefined от bundle.js. Я предполагаю, что это связано с массивом jokes и его неправильной интеграцией в мои реквизиты компонента React jokeList:

import React from 'react';
import {connect} from 'react-redux';

class ListOfJokes extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const {jokes} = this.props;
    return (
      <ul>
        {jokes.map(joke => (<li>joke</li>))}
      </ul>
    )
  } 
}

const mapStateToProps = state => ({
  jokes: state.jokes
})

export default connect(mapStateToProps, null)(ListOfJokes);

Что на самом деле не так?

Возможный дубликат Невозможно прочитать карту свойства undefined в React

Shubham Khatri 15.05.2018 18:26
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
27
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы уверены, что store.jokes всегда что-то содержит? Если вы получаете данные асинхронно, то при первом рендеринге store.jokes может быть undefined. Если это так, сделайте:

const mapStateToProps = state => ({
  jokes: state.jokes || []
})

Используйте условный цикл, чтобы проверить, есть ли шутки или нет. когда задает шутку, тогда она будет отображать.

{jokes.length !== 0 ?
   jokes.map(joke => (<li>joke</li>)) : (<li>no jokes</li>)
}

Другие вопросы по теме