Javascript React-Redux：映射一个对象数组并从每个对象初始化一个组件_Javascript_Reactjs_Redux_React Redux

Javascript React-Redux：映射一个对象数组并从每个对象初始化一个组件

javascript reactjs redux

Javascript React-Redux：映射一个对象数组并从每个对象初始化一个组件,javascript,reactjs,redux,react-redux,Javascript,Reactjs,Redux,React Redux,我有一个presentational组件，它接受一个{props}对象，并用适当的值填充它自己我还有一个容器组件，它应该将状态映射到props，获取表示绘图的对象数组，映射它并从每个对象初始化一个这给我带来了一个错误-Uncaught（in promise）TypeError:无法读取未定义的的属性“name”。讨论中的“名称”是地块的一个属性查看文档，当我们导入带有花括号的组件时，通常会发生此错误，而我们应该导入不带花括号的组件，但这里的情况并非如此我有一种感觉，正在发生的事情是，我不

我有一个presentational组件，它接受一个

{props}

对象，并用适当的值填充它自己

我还有一个容器组件，它应该将状态映射到props，获取表示绘图的对象数组，映射它并从每个对象初始化一个

这给我带来了一个错误-

Uncaught（in promise）TypeError:无法读取未定义的

的属性“name”。讨论中的“名称”是地块的一个属性

查看文档，当我们导入带有花括号的组件时，通常会发生此错误，而我们应该导入不带花括号的组件，但这里的情况并非如此

我有一种感觉，正在发生的事情是，我不正确地将道具传递给元素，但不确定正确的方法

Plot.js：

import React from 'react';

const Plot = ({ props }) => {
    return (
        <div className="media col-md-4">
            <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 {AUTH_USER, UNAUTH_USER, AUTH_ERROR, FETCH_MESSAGE, FETCH_PLOTS} from '../actions/types';

export default function(state={}, action){
    switch(action.type){
        case AUTH_USER:
            return{...state, error:'',authenticated:true};
        case UNAUTH_USER:
            return{...state, authenticated:false};
        case AUTH_ERROR:
            return { ...state, error: action.payload };
        case FETCH_MESSAGE:
            return { ...state, message: action.payload }
        case FETCH_PLOTS:
            return { ...state, plots: action.payload }
    }
    return state;

您正在进行ajax调用以获取数据。因此ajax调用需要一些时间来执行。因此，

此.props.plots

将是未定义的。因此，您需要在

仪表板

组件中进行空检查

render() {
    const plots = this.props.plots;
    if(plots === undefined){
        return <div>Loading ...</div>
    }
    return (
        <div>
            <span>{this.props.message}</span>
            <div className='container'>
                    <div className="row">
                        {plots && plots.map((plot) => <Plot key={plot._id} name={plot.name} grower={plot.grower} region={plot.region} currentState={plot.currentState} nextState={plot.nextState} daysToNext={plot.daysToNext}/>)}
                    </div>
            </div>
        </div>
    );
}

render（）{
const plots=this.props.plots；
如果（图===未定义）{
返回加载。。。
}
返回(
{this.props.message}
{plots&&plots.map（（plot）=>）}
);
}

ajax调用完成后，将再次调用render函数，然后遵循else条件，然后它将不会给出所得到的错误

还可以从

componentDidMount（）

进行api调用，这样就不会在每次状态更改时调用它。