配列をループすることができません

Question

私はコンポーネントを作成し、userReducerからデータを取得し、それを小道具に変換しましたが、データをコンソール（つまりユーザーの配列）にするとレンダリング方法では、しかし、私は、関数にデータを渡すと、配列をループしようとすると、私はエラー

キャッチされない例外TypeError下に取得しています：未定義

のプロパティ「マップ」を読み取ることができません私は理解していないです私が作るんでした間違い。

import React, {Component} from 'react'; 
import PropTypes from 'prop-types'; 
import {connect} from 'react-redux' 
import * as userActions from '../../actions/userActions' 
class HomePage extends Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      isLoading :true 
     } 
    } 
    componentDidMount(){ 
     const {dispatch} = this.props 
     dispatch(userActions.loadUsers()); 
    } 
    renderData(data){ 
     debugger 
     data.map(item=>{ 
      return (<div> 
       <h1>{item.id}</h1> 
      </div>) 
     }) 
    } 
    render() { 
     // if(!this.props.usersReducer) return <p>Loading ....</p> 
     return (
      <div> 
       {console.log(this.props.userReducer.data)} 
       {this.renderData(this.props.userReducer.data)} // if i comment this line i can see the users array in console but if i uncomment this line i am getting undefined in console for console.log(this.props.userReducer.data) too 
      </div> 
     ); 
    } 
}  
HomePage.propTypes = {}; 
HomePage.defaultProps = {};  
const mapStateToProps = (state, props) => 
    ({ 
     userReducer : state.userReducer 
    }) 
export default connect(mapStateToProps)(HomePage); 

Answer 1

userReducer.dataがそれにmap関数を呼び出す前propsで利用可能な場合は、チェックを追加します。また

renderData(data){ 
    return data.map(item=>{ 
     return (<div> 
      <h1>{item.id}</h1> 
     </div>) 
    }) 
} 

render() { 
    // if(!this.props.usersReducer) return <p>Loading ....</p> 
    const { userReducer: { data } } = this.props; 
    return (
     <div> 
      {console.log("data ===== > ", data)} 
      {data 
       ? this.renderData(data) 
       : (<p>Loading ....</p>) 
      } 
     </div> 
    ); 
} 

Answer 2

とは

componentWillMount(){ 
    const {dispatch} = this.props 
    dispatch(userActions.loadUsers()); 
} 

は必ずレンダリングする前に、データをチェックする部品を取り付ける前に、派遣loadUsers()を呼び出します。私は地図をチェックするときにそれを実装することを提案したいと思います。

renderData(data){ 
    if (!data) { 
    return (<div>Loading user data...</div>); 
    } else { 
    data.map(item=>{ 
     return (<div> 
      <h1>{item.id}</h1> 
     </div>) 
    }); 
    } 
}