Как отобразить данные, извлеченные из firestore, в таблицу boostrap в Reactionjs?Я могу получить, но не могу отобразить стандартным способом

Question

Я пытаюсь получить данные из пожарного хранилища и отобразить их в таблице начальной загрузки с помощью responsej. Я могу получить данные и сохранить их на карте, и я даже могу утешить их инструментами разработчика и увидеть их.Однако, когда дело доходит до отображения его в таблице, я использую правильный способ зацикливания карты и заполнения ее, но она ничего не может отобразить.Мне нужна помощь.

    constructor(){
    super();
       this.state={
         mydata=[]
      }
     }
    getUsers=async()=>{
    console.log("hello");
    await firebaseapp.firestore().collection('users').get()
    .then((snapshot) => {
      //console.log(snapshot);
      snapshot.forEach((doc,key) => {

        mydata.push({username:doc.data().username,group:doc.data().group,email:doc.data().email});

      });
    })
    .catch((err) => {
      console.log('Error getting documents', err);
    });


   }



    render(){
         return(
       <Paper className={styles.root}>
       <Table className={styles.table}>
        <TableHead>
          <TableRow>
            <TableCell  className={styles.tableCell}>username</TableCell>
            <TableCell  className={styles.tableCell}>email</TableCell>
           <TableCell  className={styles.tableCell}>group</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
              {mydata.map((data,key)=>{
                 return(
                  <TableRow >
                  <TableCell  className={styles.tableCell}>{data.username}</TableCell>
                  <TableCell  className={styles.tableCell}>{data.group}</TableCell>
                  <TableCell  className={styles.tableCell}>{data.emails}</TableCell>
                  </TableRow>
                 )
              })  
              }

        </TableBody>
      </Table>
    </Paper>

          )
    }
     componentDidMount(){
       this.getUsers();
     }

Answer 1

вы не можете использовать переменную состояния, поэтому она не может перерисовываться при получении данных.попробуй вот так.

...
    constructor(){
    super();
       this.state={
         mydata: []
      }
     }
...
      let data = [];
      snapshot.forEach((doc,key) => {
          data.push({username:doc.data().username,group:doc.data().
                  group,email:doc.data().email});
      });
     this.setState({mydata: data});
...
  render() {
    const { mydata } = this.state;
   ...
...