获取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)并查看发生了什么。每当你收到新的道具（触发器渲染），这个方法都会被调用。如果该道具未定义，则首次调用渲染时，如果尝试对其进行映射，则会出现此错误。如果问题依然存在，即使通过验证，你也应该确保你实际上获得了你期望的道具。