Question

我已经创建了一个组件并从userReducer获取数据并将其用于道具，但是在渲染方法中如果我控制数据（即用户数组），我可以在控制台中查看数据但是当我传递数据时到一个函数并尝试循环数组，我得到低于错误

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

我不理解我犯了什么错误。

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添加一项检查{/ 1}}。

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

并且在安装组件之前调用dispatch 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>)
    });
  }
}

无法循环数组

2 个答案: