Question

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

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

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

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函数之前附加一个空检查，这样只有在它有数据时才会执行

React-redux：循环遍历道具和填充组件

1 个答案: