Получение TypeError: Невозможно прочитать свойство 'map' неопределенной ошибки

Question

Я пытаюсь изучить 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 
    } 
} 

Я могу определить проблему, но не уверен, как решить эту проблему.

Издания является дом генерируется первым и я получаю значение позже, поэтому моя карта пуста изначально, и это дает мне ошибку

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) перед картой и посмотреть, что происходит. Этот метод будет вызываться каждый раз, когда вы получаете новые реквизиты (которые запускают рендеринг). Если эта подсказка не определена, вызывается первая визуализация, вы получите эту ошибку, если попытаетесь ее отобразить. Если проблема не устранена, даже с этой проверкой, вы должны убедиться, что вы когда-либо на самом деле получаете оповещение, которую вы ожидаете.