TypeErrorの取得：未定義のエラーのプロパティ 'map'を読み取ることができません

Question

私はreduxと反応するjsを学ぼうとしています。

は、これは私が問題を決定することができますが、問題を解決する方法がわからないです、私のView.js

export default HomeView 

//Import React 
import React from 'react' 

//Import Redux Components 
import { connect } from 'react-redux'; 

//Import Action 
import { addAcct, upsertAccts, qryAccts, updateAccts } from '../../Counter/modules/counter'; 

class HomeView extends React.Component { 
    constructor (props) 
    { 
    super(props); 
    } 
    componentWillMount() 
    { 
    this.props.dispatch(qryAccts()); 
    console.log(this.props); 
    this.forceUpdate(); 
    } 
    componentDidMount() 
    { 
    console.log('----Did----',this.props.accts); 
    } 
    //Perform Upsert Actions 
    upsertAccts(e) 
    { 
    this.props.dispatch(upsertAccts(this.props.accts)) 
    } 

    //Add new Account to the Array 
    addAcct(event) 
    { 
    this.props.dispatch(addAcct()); 
    console.log('===this.props===',this.props); 
    } 


    //onChange function to handle when a name is changed 
    handleChange(ev,index) 
    { 
    this.props.dispatch(updateAccts(ev.target.value,index)); 
    } 

    dateChange(e) 
    { 
    console.log(e.target.value); 
    } 

    render() { 
    console.log('-----this.props.accts-------',this.props.accts); 
    return (
     <div> 
     <h1>Accounts</h1> 
     <ul> 
     { this.props.accts.map((v,i) => <li key={i}><input style={{width:'500px'}} onChange={event => this.handleChange(event,i)} value={v.Name}/></li>) } 
     </ul> 
     </div> 
    ); 
    } 
} 

//Connects Redux State to React, Injects reducer as a property 
//export default Page1Demo; 
export default connect(state => ({ accts: state.accts }))(HomeView); 

そして、ここに私の減速アクション

// ------------------------------------ 
// Constants 
// ------------------------------------ 


export const RECEIVED_ACCTS = 'RECEIVED_ACCTS'; 
export const UPSERT_ACCTS = 'UPSERT_ACCTS'; 
export const ADD_ACCT = 'ADD_ACCT'; 
export const UPDATE_ACCTS = 'UPDATE_ACCTS'; 


// ------------------------------------ 
// Actions 
// ------------------------------------ 
export function recAccts(accts) { 
    console.log('------16----',accts); 
    return{ 
    type: RECEIVED_ACCTS, 
    accts: accts 
    } 
} 

export function qryAccts() 
{ 
    return dispatch => { 
    ResponsiveCtrl.getAccts(function(r, e) { 
     console.log('------26----',r); 
     console.log('------26----',e); 
     dispatch(recAccts(r)) 
    },{escape:false}); 
    } 
} 

export function upsertAccts(acctStore) { 
    return dispatch => { 
    ResponsiveCtrl.upsertAccts(acctStore, function(r, e) { 
     dispatch(recAccts(r)) 
    },{escape:false}); 
    } 
} 

export function addAcct() { 
    return { 
    type: ADD_ACCT 
    } 
} 

export function updateAccts(name,index) { 
    return { 
    type: UPDATE_ACCTS, 
    acctName:name, 
    listIndex:index 
    } 
} 

/* This is a thunk, meaning it is a function that immediately 
    returns a function for lazy evaluation. It is incredibly useful for 
    creating async actions, especially when combined with redux-thunk! 

    NOTE: This is solely for demonstration purposes. In a real application, 
    you'd probably want to dispatch an action of COUNTER_DOUBLE and let the 
    reducer take care of this logic. */ 



// ------------------------------------ 
// Action Handlers 
// ------------------------------------ 

// ------------------------------------ 
// Reducer 
// ------------------------------------ 
const initialState = []; 

//Reducer function 
export function accts(state = initialState, action) { 
    console.log('==action===',action); 
    console.log('==initialState===',initialState); 
    console.log('==state===',state); 
    switch (action.type) { 
    case RECEIVED_ACCTS: 
    //Return the Accouts we receive from Salesforce 
    state = action.accts; 
    return state; 
    case UPDATE_ACCTS: 
    //Update our array at the specific index 
    var newState = state.slice(); 
    newState[action.listIndex].Name = action.acctName; 
    return newState; 
    case ADD_ACCT: 
    //Add a new Account to our Array 
    var newState = state.slice(); 
    newState.push({Name:""}); 
    return newState; 
    default: 
    return state 
    } 
} 

です。

問題は、DOMが最初に生成され、私は私のマップは、最初は空である理由です後で値を取得していますし、私がエラー与えているこの問題を解決する方法を

TypeError: Cannot read property 'map' of undefined

任意のアイデア。

Answer 1

ブレークthis.props.acctsの検証を持つ独自のメソッドにそのコード。

... 

renderAccts() { 
    if (Array.isArray(this.props.accts)) { 
    return this.props.accts.map((v,i) => <li key={i}><input style={{width:'500px'}} onChange={event => this.handleChange(event,i)} value={v.Name}/></li>) 
    } 
    return '' 
}, 

render() { 
... 
<div> 
    <h1>Accounts</h1> 
    <ul> 
    {this.renderAccts()} 
    </ul> 
</div> 
} 

あなたは、あなたがpropsから期待まさに取得していることを確実にしたいので、これは、で始まることをお勧めですが、それはまた、あなたがそれはあなたの最初の仮定ではないことが判明した場合、さらにデバッグできるようになります問題の原因マップの前に簡単にconsole.log(this.props.accts)を追加して、現在進行中のことを確認できます。このメソッドは、新しいプロップ（レンダリングをトリガーする）を受け取るたびに呼び出されます。レンダリングが初めて呼び出されたときにその小道具が定義されていない場合、上にマップしようとするとこのエラーが発生します。問題が解決しない場合でも、この検証を行っても、実際にあなたが期待している小道具を実際に取得していることを確認する必要があります。