Question

我有一个表示组件，它使用{props}对象并用适当的值填充自己。

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

这给我一个错误 - Uncaught (in promise) TypeError: Cannot read property 'name' of undefined。有问题的“名称”是情节的属性。

查看文档时，当我们导入带有花括号的组件时，通常会发生此错误，但是我们应该在没有它的情况下导入它，但这不是这种情况。

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

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;

Dashboard.js：

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'>
                        <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>
        );
    }
}

function mapStateToProps(state) {
    return {
        message: state.auth.message,
        plots: state.auth.plots
    }
}

export default connect(mapStateToProps, actions)(Dashboard);

编辑：

这是fetchPlots（）。我知道它正在工作，并且这些图可以作为道具使用，因为当我在dashboard.js中的return语句之前添加一个console。（log）语句时，我可以看到它们，并且它们很好，具有所有必需的属性。 / p>

export function fetchPlots() {
    return function (dispatch) {
        axios.get(`${ROOT_URL}/plots`, {
            headers: {
                authorization: localStorage.getItem('token')
            }
        })
            .then(response => {
                dispatch({
                    type: FETCH_PLOTS,
                    payload: response.data
                });
            });
    }
}

我的减速机：

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;

Answer 1

将const Plot = ({ props })更改为const Plot = (props)

Answer 2

您正在进行ajax调用以获取数据。所以ajax调用需要一些时间来执行。因为this.props.plots将是未定义的。因此，您需要在Dashboard组件

中进行空检查

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>
    );
}

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

还可以从componentDidMount()拨打api电话，这样每次状态更改时都不会调用它。

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

2 个答案: