無法循環一個數組

Question

我已經創建了一個組件，並從userReducer獲取數據並將其綁定到道具，但在呈現方法中，如果我控制數據（即用戶數組），我可以在控制檯中看到數據但是當我的數據傳遞給一個函數，並嘗試循環陣列上，我得到以下錯誤

遺漏的類型錯誤：無法讀取的不確定

我不理解，我讓財產「地圖」任何錯誤。

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可在props就可以調用map功能之前。

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

而且也呼籲調度loadUsers()安裝組件

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

渲染之前，請務必檢查數據之前。我想建議在檢查地圖時執行它。

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