Javascript 读取Firebase集合后React Native Setstate（）不呈现

我已经把这个组件精简到最低限度了。如果我在loveOneData数组中硬编码一个对象，它就会工作。当我从Firebase集合读取数据时，它似乎在状态数组中设置了数据，但给出了一个TypeError:无法读取未定义的属性“LO_Name”

使用状态数组中硬编码的数据，其工作原理如下：

constructor(props) {
    super(props);
    this.dbRef = firebase.firestore().collection("users");
    this.state = {
        loveOneData: [
            {LO_Type: "Daughter", LO_Gender: "Male", LO_Name: "TV", LO_Avatar: "https://firebasestorage.googleapis.com/v0/b/aetasm…=media&token=98739709-3a40-40db-83aa-ca51c058976f"},
        ],
    };
}

    render() {
        console.log("FamilyDashboard: Render: loveOneData: ", this.state.loveOneData);
        return (
            <Container>
                <Content>
                    <Text>{this.state.loveOneData[0].LO_Name}</Text>
                </Content>
            </Container>
        );
    }

并按如下方式简单渲染，效果良好：

constructor(props) {
    super(props);
    this.dbRef = firebase.firestore().collection("users");
    this.state = {
        loveOneData: [
            {LO_Type: "Daughter", LO_Gender: "Male", LO_Name: "TV", LO_Avatar: "https://firebasestorage.googleapis.com/v0/b/aetasm…=media&token=98739709-3a40-40db-83aa-ca51c058976f"},
        ],
    };
}

    render() {
        console.log("FamilyDashboard: Render: loveOneData: ", this.state.loveOneData);
        return (
            <Container>
                <Content>
                    <Text>{this.state.loveOneData[0].LO_Name}</Text>
                </Content>
            </Container>
        );
    }

我用componentDidMount的Firebase调用填充它：

    async componentDidMount() {
        this.getLoveOnes();
    }

这是用来读取数据库的函数

    getLoveOnes = () => {
        console.log("FamilyDashboard: getLoveOnes: Entering function");
        //
        // get the current firebase user;
        //
        const user = firebase.auth().currentUser;
        if (user) {
            console.log("FamilyDashboard: getLoveOnes: getting current firebase user id: ", user.uid);
        }
        var arr = [];

        firebase
            .firestore()
            .collection("users")
            .doc(user.uid)
            .collection("loveones")
            .get()
            .then((querySnapshot) => {
                let profile = querySnapshot.docs.map((doc) => doc.data());
                querySnapshot.forEach((queryDocumentSnapshot) => {
                    arr.push(queryDocumentSnapshot.data());
                    console.log(queryDocumentSnapshot.id, " => ", queryDocumentSnapshot.data().LO_Name);
                });
                return profile;
            })
            .catch(function (error) {
                console.log("FamilyDashboard: getloveones: error getting loveones: ", error);
            });
        //
        //  not sure if this is the right way to do this.
        //
        console.log("FamilyDashboard: getLoveOnes: arr = ", arr);
        this.setState({loveOneData: arr});
        console.log("FamilyDashboard: getLoveOnes: Exiting function");
    };

this.setState（{loveOneData:arr}）似乎起作用，可以在控制台日志语句中看到 就在渲染块的开始处：

    render() {
        console.log("FamilyDashboard: Render: loveOneData: ", this.state.loveOneData);
        return (
            <Container>
                <Content>
                    <Text>{this.state.loveOneData[0].LO_Name}</Text>
                </Content>
            </Container>
        );
    }

render（）{
log（“FamilyDashboard:Render:loveOneData:”，this.state.loveOneData）；
返回(
{this.state.loveOneData[0].lou Name}
);
}

登录控制台：

但是，当我从Firebase填充状态数组并对其进行渲染时，会出现以下错误：

**要在状态数组中显示对象的名称，我需要做什么？

我是否正在从Firebase调用填充状态数组更正？**