无法循环一个数组

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>) 
    }); 
    } 
}