TypeError：无法读取属性“地图”

Question

我正在尝试使用axios API来获取usersList

但是我在下面出现了一个错误：

如何解决这个问题？

我附上了我的代码

我认为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>;
    })
}

Answer 2

很可能在您的父组件中，您有类似let users;的内容。这意味着它将作为undefined传递并弄乱了map()。因此，请尝试将其声明为let user = {}。

Answer 3

this.props.users在数组之前是undefined。您应在使用[Array.map（）] [1]

之前添加支票

renderUsers(){
    console.log("renderUsers()");
    const { users } = this.props;

    return Array.isArray(users) && users.map(u=> <li key={u.id}>{u.name}</li>);
}

或在组件中添加defaultProp

class UsersList extends Component {
    static defaultProps = {
        users: []
    }
}