React-redux：循环遍历 props 和填充组件答案

【问题标题】：React-redux: looping through props and populating componentsReact-redux：循环遍历 props 和填充组件
【发布时间】：2018-03-07 15:33:49
【问题描述】：

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

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

我怀疑发生了什么，因为我已将相关映射代码放入 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);

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案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 函数之前附加一个空检查，以便它只有在有数据时才执行

【讨论】：

效果很好。不幸的是，我的 Plot 组件出了点问题——我得到了这个：Uncaught (in promise) TypeError: Cannot read property 'name' of undefined。这可能是什么？通常，当您使用默认导出的大括号导入类时会发生此错误，但此处并非如此。有什么想法吗？
检查一次您的数据。这个错误是因为 {plot.name} 检查名称是否存在于情节中
确实如此。
仔细检查 plots 是否为数组，然后对其进行控制台迭代，然后检查名称是否存在。
Plots 是一个类似数组的对象。当我使用 Array.from(plots) 并进行迭代时，我可以看到每个组件都有一个 name 属性。但是当我尝试映射这个数组时，我仍然得到同样的错误。