React-Redux:通过道具和填充组件进行循环

Question

i有一个称为仪表板的连接的反应组件，该组件应用绘图组件填充。这些组件应通过映射JSON对象的数组来创建，并通过API调用检索并放置在状态中，然后通过函数MapStateToprops（）映射到Props。

API呼叫正在工作。MapStateToprops也正在工作。但是，我尝试在道具中映射绘图JSON对象的数组并从每个绘图对象中创建一个失败的绘图组件，并带有以下错误：无法读取未定义的

的属性"映射"

我怀疑发生的事情是，由于我将相关的映射代码放入渲染（）生命周期挂钩中，因此代码正在尝试在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);

Answer 1

{plots && plots.map((plot) => 
    <Plot 
        name={plot.name} 
        grower={plot.grower} 
        region={plot.region} 
        currentState={plot.currentState} 
        nextState={plot.nextState} 
        daysToNext={plot.daysToNext}
    />
)}

只需在地图函数之前附加零检查，以便它仅在具有数据