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

Question

Я пытаюсь реализовать свое первое приложение 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);

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

Answer 1

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

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

Answer 2

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

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