reactjs - Why do I get Undefined

Question

I have this code:

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {compose} from "redux";
import {firestoreConnect} from "react-redux-firebase";
import {getAllowance} from "../utils";


class MemberList extends Component {
    render() {
        const {allowance} = this.props
        console.log('allowance', allowance);
        return (
            <div className="members">
                {getAllowance(allowance, 'Jackie')}
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        allowance: state.firestore.ordered.allowance,
        users: state.firestore.ordered.users,
        auth: state.firebase.auth,
    }
}

export default compose(
    connect(mapStateToProps),
    firestoreConnect([
        {collection: 'users'},
        {collection: 'allowance'}
    ])
)(MemberList);

Without {getAllowance(allowance, 'Jackie')} I get the data in the console: [console.log][1] [1]: https://i.stack.imgur.com/ZOhHu.png

But when I want to work with the data -> allowance = undefined

code getAllowance

export const getAllowance = (allowances, firstName) => {
    console.log('getAllowance props', allowances);
    console.log('getAllowance id', firstName);
    //console.log('id', id);
    const kid = allowances.filter(allowance => allowance.selectedKid === firstName);
    console.log('kid', kid);
    if(allowances && Array.isArray(kid) && kid.length){
        return kid[0].totalAmount;
    }
    else {
        return 0;
    }
}

This works in another component but here it fails and I don't know why...

Answer 1

等待大神解答