React-redux: перебор реквизитов и заполнение компонентов

У меня есть подключенный компонент React под названием Dashboard, который должен быть заполнен компонентами Plot. Эти компоненты должны создаваться путем сопоставления массива объектов JSON, извлекаться и помещаться в состояние с помощью вызова API, а затем сопоставляться с реквизитами с помощью функции mapStateToProps().

Вызов API работает. mapStateToProps также работает. Однако моя попытка сопоставить массив объектов Plot JSON в реквизитах и ​​создать компонент Plot из каждого из них не удалась со следующей ошибкой: Не удается прочитать карту свойства undefined

Я подозреваю, что происходит то, что, поскольку я поместил соответствующий код сопоставления в хук жизненного цикла render(), код пытается запуститься до возврата вызова API. Таким образом, в состоянии нет свойства для того, что он пытается сделать, когда он пытается это сделать. Так ли это? Если да, то как я могу это исправить?

Мой компонент сюжета:

import React from 'react';

const Plot = ({ props }) => {
    return (
        <div className="media">
            <div className="media-left">
                <a href="#">
                    <img className="media-object" src="http://placehold.it/200/550" alt="Placehold" />
                </a>
            </div>
            <div className="media-body">
                <h4 className="media-heading">{props.name}</h4>
                <ul>
                    <li><strong>Grower: </strong> {props.grower}</li>
                    <li><strong>Region: </strong> {props.region}</li>
                    <li><strong>Current State: </strong> {props.currentState}</li>
                    <li><strong>Next State: </strong> {props.nextState}</li>
                    <li><strong>Days To Next State: </strong> {props.daysToNext}</li>
                    <br />
                    <span class="pull-right">
                        <i id="like1" class="glyphicon glyphicon-thumbs-up"></i> <div id="like1-bs3"></div>
                        <i id="dislike1" class="glyphicon glyphicon-thumbs-down"></i> <div id="dislike1-bs3"></div>
                    </span>
                </ul>
            </div>
        </div>
    );
};

export default Plot;

Компонент «Моя панель инструментов»:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';
import Plot from './plot';

class Dashboard extends Component {
    componentWillMount() {
        this.props.fetchMessage();
        this.props.fetchPlots();
    }

    render() {
        const plots = this.props.plots;
        return (
            <div>
                <span>{this.props.message}</span>
                <div className='container'>
                    {plots.map((plot) => <Plot name={plot.name} grower={plot.grower} region={plot.region} currentState={plot.currentState} nextState={plot.nextState} daysToNext={plot.daysToNext}/>)}
                </div>
            </div>
        );
    }
}

function mapStateToProps(state)
{
    return {
        message: state.auth.message,
        plots: state.auth.plots
    }
}

export default connect(mapStateToProps, actions)(Dashboard);