我正在获取用户并将其传递给 Users 组件。 但是，浏览器显示 TypeError：未定义没有属性。

import './App.css';
import NavBar from './components/navbar/NavBar';
import axios from 'axios';
import { Component } from 'react';
import Users from './components/users/Users';
class App extends Component {
    state = {
        users: [],
        loading: false,
    };

    async componentDidMount() {
        this.setState({
            loading: true,
        });
        const response = await axios.get('http://api.github.com/users');
        const userData = response.data;
        this.setState({
            loading: false,
            users: userData,
        });
    }

    render() {
        return (
            <div className='App'>
                <NavBar title={'Github Finder'} icon={'fab fa-github'} />
                <div className='container'>
                    <Users loading={this.state.loading} users={this.state.users} />
                </div>
            </div>
        );
    }
}

export default App;

我正在将加载和用户作为 prop 传递给用户组件。 这是用户组件。

import UserItem from './UserItem';
import React from 'react';

const Users = (props) => {
    const userStyle = {
        display: 'grid',
        gridTemplateColumns: 'repeat(3,1fr)',
        gridGap: '1rem',
    };

    if (this.props.loading) {
        return <h1>Loading...</h1>;
    } else {
        return (
            <div style={userStyle}>
                {this.props.users.map((user) => (
                    <UserItem key={user.id} user={user} />
                ))}
            </div>
        );
    }
};
export default Users;

显示指向此处的错误：我不明白为什么会显示此错误。当 props 已传递时。

  10 | 
> 11 | if (this.props.loading) {
     | ^  12 |  return <h1>Loading...</h1>;
  13 | } else {
  14 |  return (