獲取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)並查看發生了什麼。每當你收到新的道具（觸發器渲染），這個方法都會被調用。如果該道具未定義，則首次調用渲染時，如果嘗試對其進行映射，則會出現此錯誤。如果問題依然存在，即使通過驗證，你也應該確保你實際上獲得了你期望的道具。