为什么我的阵列不使用 map 方法，即使它实际上是一个阵列？

Question

So I console.log the state of users after I set it as an array of objects from the github api and it displays as an array. However, I can't use the map function like this (if I decided to use it in a child component using props):

this.state.users.map((user)=>(
 <UserItem key={user.id} user={user}/>
))

I get an error: "TypeError: this.state.users.map is not a function" And It's pretty confusing because it is an array. It looks like this in the props viewer: As you can see. Users is an array. I don't understand but I could be missing something very simple from lack of coffee. Thanks for your help. I appreciate it.

import React, { Component } from 'react';
import Navbar from './components/layout/Navbar';
// import UserItem from './components/users/UserItem';
import Users from './components/users/Users';
// import './App.css';
import axios from 'axios';

class App extends Component {

  state = {
    users: {},
    loading: false
  }

  async componentDidMount() {
    this.setState(
      {loading: true}
    )
    const res = await axios.get('https://api.github.com/users')

    this.setState(
      { 
        loading: false,
        users: res.data,
      }
    
    )

    // console.log(res.data)
  }

  render() {


    return (
      <React.Fragment>
        <Navbar />
        <div className="container">
          <Users loading={this.state.loading} users={this.state.users} />
        </div>
      </React.Fragment>
    );
  }

}

export default App;

Answer 1

The initial value of this.state.users is an object. Hence the error map is not a function

state = {
    users: {}, <--- object
    loading: false
}

The API call happens after the component has mounted for the first time in the componentDidMount life cycle method and the value of state.users gets populated with the data.

The component has to render with the initial state on the first render.

Change the value of users to be an empty array in the initial state.

state = {
    users: [],  // change initial value of users to be an empty array
    loading: false
}