Javascript 如何在react组件中呈现状态数组。该数组在状态下可用，但在呈现其属性时显示为未定义

我想将firestore中的数据渲染到我的react组件中。我用firestore数据更新了全局状态数组，它正在更新，但当我要渲染该数组时，该数组显示为未定义

我尝试过使用redux，同样的问题也发生了，现在使用reactn，但同样的事情也在发生

import React from "react";
import {setGlobal} from "reactn";
import ReactDOM from "react-dom";
import Apps from "./Apps";

setGlobal({  names:[],})

ReactDOM.render( <Apps/>, document.getElementById("root"))
ReactDOM.render(<Apps/>, document.getElementById("root"))`

-----App.js----------

import React from "reactn";
import db from "./firebase";

class Apps extends React.Component{

    componentDidMount(){
        db.collection("users").get().then((snapshot)=>{

            snapshot.forEach((doc)=>{

            const user=  {name:doc.data().name,
               weight:doc.data().weight,
             id:doc.id}
             this.global.names.push(user)
          })       
    })
}

render(){
        ///this show the data in names array of state
        console.log(this.global)
        //// this show undefind (its having data)
        console.log(this.global.names[0])
        return(
            ///but while rendering its not showing anything
            <div>{this.global.names.map((name)=>(
                <h1>weight is {name.weight} </h1>
            )
            )}</div>
        )
    }
}

export default Apps;

从“React”导入React；
从“reactn”导入{setGlobal}；
从“react dom”导入react dom；
从“/Apps”导入应用程序；
setGlobal（{names:[]，}）
ReactDOM.render（，document.getElementById（“根”））
ReactDOM.render（，document.getElementById（“根”））`
-----App.js----------
从“reactn”导入React；
从“/firebase”导入数据库；
类应用程序扩展了React.Component{
componentDidMount（）{
db.collection（“用户”）.get（）。然后（（快照）=>{
snapshot.forEach（（doc）=>{
const user={name:doc.data（）.name，
重量：单据数据（）重量，
id:doc.id}
this.global.names.push（用户）
})       
})
}
render（）{
///这将在状态的名称数组中显示数据
console.log（this.global）
////此显示未查找（其包含数据）
console.log（this.global.names[0]）
返回(
///但在渲染时，它什么也没有显示
{this.global.names.map（（name）=>(
权重为{name.weight}
)
)}
)
}
}
导出默认应用程序；

而不是

this.global.names.push(user)

你必须使用

this.setGlobal(names: names.push(user))

---

我认为不要在react中使用全局变量，只要这样做就行了

class Apps extends React.Component {

constructor(props) {
    super(props)
    this.state = {
        names: [],
    }
}

componentDidMount() {

    let array = [];
    db.collection("users").get()
        .then((snapshot) => {

            snapshot.forEach((doc) => {

                const user = {
                    name: doc.data().name,
                    weight: doc.data().weight,
                    id: doc.id
                }
                array.push(user)
            })
        })
        .then(() => {
            this.setState({
                names : array
            })
        })
}

render() {
    ///this show the data in names array of state
    console.log(this.state.names)
    //// this show undefind (its having data)
    console.log(this.state.names[0])
    return (
        ///but while rendering its not showing anything
        <div>{this.state.names.map((name) => (
            <h1>weight is {name.weight} </h1>
        )
        )}</div>
    )
}
}

export default Apps;

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
姓名：[]，
}
}
componentDidMount（）{
让数组=[]；
db.collection（“用户”）.get（）
。然后（（快照）=>{
snapshot.forEach（（doc）=>{
常量用户={
名称：doc.data（）.name，
重量：单据数据（）重量，
id:doc.id
}
array.push（用户）
})
})
.然后（（）=>{
这是我的国家({
名称：数组
})
})
}
render（）{
///这将在状态的名称数组中显示数据
console.log（this.state.names）
////此显示未查找（其包含数据）
console.log（this.state.names[0]）
返回(
///但在渲染时，它什么也没有显示
{this.state.names.map（（name）=>(
权重为{name.weight}
)
)}
)
}
}
导出默认应用程序；

---

试试这个，告诉我它是否有效：）

这行打印的是什么：

console.log（this.global）

实际上我想使用全局状态，这样我就可以访问另一个组件…而不是组件状态