Getting TypeError: Kann die Eigenschaft 'map' mit undefiniertem Fehler nicht lesen

Question

Ich versuche zu lernen, reagieren js mit Redux.

Das ist mein 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); 

Und meine Minderer Aktion hier

// ------------------------------------ 
// 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 
    } 
} 

Ich bin in der Lage, das Problem zu bestimmen, aber nicht sicher, wie das Problem zu beheben.

Ausgabe ist dom zuerst erzeugt wird und ich die Werte bin immer später, deshalb meine Karte zunächst leer ist, und es ist mir

TypeError: Cannot read property 'map' of undefined

Jede Idee, Fehler zu geben, wie dieses Problem zu beheben.

Answer 1

Pause, dass Code in eine eigene Methode mit einer Validierung auf 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> 
} 

Das ist eine gute Praxis zu beginnen, weil Sie, dass Sie genau, was Sie von props erwarten sind sicherstellen wollen, bekommen, aber es wird Ihnen auch weiter debuggen lassen, wenn es, dass Ihre ursprüngliche Annahme nicht das ist stellt sich heraus, Ursache des Problems. Sie können jetzt einfach eine console.log(this.props.accts) vor der Karte hinzufügen und sehen, was vor sich geht. Diese Methode wird jedes Mal aufgerufen, wenn Sie neue Requisiten erhalten (was das Rendern auslöst). Wenn diese Prop nicht definiert ist, wird beim ersten Aufruf des Renderers dieser Fehler angezeigt, wenn Sie versuchen, darüber zu mappen. Wenn das Problem weiterhin besteht, sollten Sie selbst bei dieser Validierung sicherstellen, dass Sie tatsächlich die erwartete Prop-Komponente erhalten.