this.props.array.map 不是函数

Question

我正在学习反应，并试图在我定义的数组中为每个用户呈现一个元素，当我去测试它时，我的浏览器会抛出一个错误，说this.props.users.map不是一个函数，我已经完成了在我不明白我错过了什么之前，与此类似的事情。在父组件中constructor(props){        super(props);        this.state = {            users:[],            chosenUser:undefined        }        this.currentUser = this.currentUser.bind(this);    }        componentDidMount(){        axios.get('/api/users')        .then(results =>{            this.setState({                users: results.data            });        })        .catch(err => {            console.log(err);        });    }render(){        return <>        <Users users={this.state.users} chosenUser={this.state.chosenUser}/>        </>    }在子组件中render(){        return<>        <h1>Users rendered</h1>            {this.props.users && this.props.users.map(user =>{<li key={user._id}><button onClick={() => this.props.chosenUser}>{user.name}</button></li> // generate a button for each user            })}        <p>Not on the list? Don't worry, were not super exclusive, you can make a character here!</p>        <NewUserForm newUser={this.addNewUser} name={this.state.name}/>        </>    }

Answer 1

this.props.array.map is not a function当您尝试映射不是数组的东西时发生

axios.get('/api/users')

        .then(results =>{

            this.setState({

                users: results.data

            });

        })

确保results.data是数组

Answer 2

由于您的状态中有多个值，因此在这种情况下您不希望覆盖其他值chosenUser:undefined。这就是为什么您需要在设置users.

您的初始状态为空Array，但Axios返回一个JSON对象，这意味着您将用户的值设置为对象。

您的代码应如下所示。

componentDidMount(){

    axios.get('/api/users')

    .then(results =>{

        this.setState({...this.state, users: [...this.state.users, results.data]

        });

    })

    .catch(err => {

        console.log(err);

    });

}

您可以使用您的map()函数循环遍历每个项目。

Answer 3

map()方法仅适用于数组，我认为您调用的 api 的结果不会返回数组。所以，this.props.users不会是一个数组，它会抛出那个错误。

我建议检查您调用的 api (/api/users) 并查看结果。它应该是一个数组