javascript - 类型错误 : Cannot read property 'map'

Question

我正在尝试使用 axios 获取用户列表接口(interface)

但是我得到了以下错误:

如何解决这个问题？

我附上了我的代码

我认为 renderUsers 函数有问题...

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchUsers } from '../actions';

class UsersList extends Component {
    componentDidMount(){
        // this.props.fetchUsers();


        console.log("It called....")
    }

    renderUsers(){
        console.log("renderUsers()")

        return this.props.users.map(user => {
            return <li key={user.id}>{user.name}</li>;
        })
    }

    render(){
        return (
            <div>
                Here's a big list of users:
                <ul>{this.renderUsers()}</ul>
            </div>
        )
    }
}

function mapStateToProps(state){
    return { users: state.users };
}

export default connect(mapStateToProps, { fetchUsers })(UsersList);

Answer 1

您首先从 componentDidMount 中的 this.props.fetchUsers(); 中删除评论，以便它可以触发 API 并获得响应。

现在组件将在我们从 API 获得响应之前渲染(至少第一次)。在这种情况下，this.props.users 是未定义的。

所以在映射之前检查是否 this.props.users。

renderUsers(){
    console.log("renderUsers()")

    return this.props.users && this.props.users.map(user => {
        return <li key={user.id}>{user.name}</li>;
    })
}