javascript - React-redux:遍历 props 和填充组件

Question

我有一个名为 Dashboard 的已连接 React 组件，它应该填充有 Plot 组件。这些组件应该通过映射一组 JSON 对象来创建，通过 API 调用检索并放入状态，然后通过函数 mapStateToProps() 映射到 props。

API 调用正常。 mapStateToProps 也在工作。但是，我尝试映射 props 中的 plot JSON 对象数组并从每个对象创建一个 Plot 组件失败，并出现以下错误:无法读取未定义的属性“map”

我怀疑发生了什么，因为我已经将相关的映射代码放入 render() 生命周期 Hook 中，代码试图在 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}
    />
)}

只要在map函数前追加一个null检查，让它只有在有数据时才执行