React-Redux：映射對象數組並初始化每個對象的組件

Question

我有一個演示組件，它帶有一個{props}對象，並使用適當的值填充自身。

我還有一個容器組件，應該將狀態映射到道具，獲取代表繪圖的對象數組，將其映射並初始化每個對象。

這給我拋出一個錯誤- 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）語句時，我可以看到它們，並且它們具有所有必要的屬性。

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調用，以便每次狀態更改時都不會調用它。