javascript - 如何在 React 组件中渲染状态数组。该数组在状态下可用，但在渲染时显示未定义

Question

我想将数据从 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;

Answer 1

代替

this.global.names.push(user)

你必须使用

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