获取TypeError：无法读取未定义错误的属性“map”

Question

I am trying to learn react js with redux.

This is my 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);

And my reducer action here

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

I am able to determine the issue but not sure how to fix the issue.

Issue is dom is generated first and I am getting the values later that's why my map is empty initially and it is giving me error

TypeError: Cannot read property 'map' of undefined

Any idea how to fix this issue.

Answer 1

Break that code into its own method with a validation on 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>
}

This is good practice to begin with, because you want to ensure that you are getting exactly what you expect from props , but it will also let you debug further if it turns out that your initial assumption is not the cause of the problem. You can now easily add a console.log(this.props.accts) before the map and see what's going on. This method will be called every time you receive new props (which triggers render). If that prop is undefined the first time render is called, you will get this error if you try to map over it. If the problem persists, even with this validation, you should ensure you are ever actually getting the prop you expect.