Javascript 反应数组贴图在渲染中不显示所有属性

utils/firebase.js

export function getAllUsers() {
    return firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) {
        return fetch("{EndPoint}", {
            method: "GET",
            headers: {
               "Content-Type": "application/json",
               Authorization: idToken
            }
        }).then(response => response.json())
    })
}

export function getUserByUid(uid) {
    return db.collection("users").doc(uid).get();
}

import { getAllUsers, getUserByUid} from '../utils/firebase';
export function handleGetAllUsers() {
    return (dispatch) => {
        dispatch(showLoading())
        
        return getAllUsers()
        .then(users => {
            let result = [];
            users.map(u => {
                let user= {...u}
                
                getUserByUid(u.uid)
                .then(doc => {
                    const { gender } = doc.data();
                    user.gender = gender;
                })
                
                result.push(user)
            })
            dispatch(hideLoading())
            return dispatch(AllUsers(result))
        }).catch(error => {
            return dispatch(AllUsers([], error))
        })
    }
}

import { handleGetAllUsers } from '../../store/actionCreators/users';
componentDidMount() {
        this.props.dispatch(handleGetAllUsers())
}
render() {
    return (
       <table>
           <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Gender</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.users && this.props.users..map(user =>
                            <tr key={user.uid}>
                                <td>{user.displayName}</td>
                                <td>{user.email}</td>
                                <td>{user.gender}</td>
                            </tr>
                    )}
                </tbody>
       </table>
}

操作创建者/用户

export function getAllUsers() {
    return firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) {
        return fetch("{EndPoint}", {
            method: "GET",
            headers: {
               "Content-Type": "application/json",
               Authorization: idToken
            }
        }).then(response => response.json())
    })
}

export function getUserByUid(uid) {
    return db.collection("users").doc(uid).get();
}

import { getAllUsers, getUserByUid} from '../utils/firebase';
export function handleGetAllUsers() {
    return (dispatch) => {
        dispatch(showLoading())
        
        return getAllUsers()
        .then(users => {
            let result = [];
            users.map(u => {
                let user= {...u}
                
                getUserByUid(u.uid)
                .then(doc => {
                    const { gender } = doc.data();
                    user.gender = gender;
                })
                
                result.push(user)
            })
            dispatch(hideLoading())
            return dispatch(AllUsers(result))
        }).catch(error => {
            return dispatch(AllUsers([], error))
        })
    }
}

import { handleGetAllUsers } from '../../store/actionCreators/users';
componentDidMount() {
        this.props.dispatch(handleGetAllUsers())
}
render() {
    return (
       <table>
           <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Gender</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.users && this.props.users..map(user =>
                            <tr key={user.uid}>
                                <td>{user.displayName}</td>
                                <td>{user.email}</td>
                                <td>{user.gender}</td>
                            </tr>
                    )}
                </tbody>
       </table>
}

组件/用户

export function getAllUsers() {
    return firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) {
        return fetch("{EndPoint}", {
            method: "GET",
            headers: {
               "Content-Type": "application/json",
               Authorization: idToken
            }
        }).then(response => response.json())
    })
}

export function getUserByUid(uid) {
    return db.collection("users").doc(uid).get();
}

import { getAllUsers, getUserByUid} from '../utils/firebase';
export function handleGetAllUsers() {
    return (dispatch) => {
        dispatch(showLoading())
        
        return getAllUsers()
        .then(users => {
            let result = [];
            users.map(u => {
                let user= {...u}
                
                getUserByUid(u.uid)
                .then(doc => {
                    const { gender } = doc.data();
                    user.gender = gender;
                })
                
                result.push(user)
            })
            dispatch(hideLoading())
            return dispatch(AllUsers(result))
        }).catch(error => {
            return dispatch(AllUsers([], error))
        })
    }
}

import { handleGetAllUsers } from '../../store/actionCreators/users';
componentDidMount() {
        this.props.dispatch(handleGetAllUsers())
}
render() {
    return (
       <table>
           <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Gender</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.users && this.props.users..map(user =>
                            <tr key={user.uid}>
                                <td>{user.displayName}</td>
                                <td>{user.email}</td>
                                <td>{user.gender}</td>
                            </tr>
                    )}
                </tbody>
       </table>
}

从“../../store/actionCreators/users”导入{handleGetAllUsers}；
componentDidMount（）{
this.props.dispatch（handleGetAllUsers（））
}
render（）{
返回(
名称
电子邮件
性别
{this.props.users&&this.props.users..map（user=>
{user.displayName}
{user.email}
{user.gender}
)}
}

错误是某些属性被隐藏！！

但在组件中进行任何交互之后：

！！！ 错误在哪里？ 解决办法是什么？ 可能解决方案是使用async/await函数，请具体说明