Динамические данные из mui-datatable

Question

Я пытаюсь собрать некоторую информацию в моей коллекции Firebase и добавить в Mui-Datatable. Как я могу оперативно добавить эту информацию в мою таблицу?

let info = {
      name: 'Leonard',
      age: 23,
      city: 'TESTE',
      state: 'TS',
      e_mail: '[e-mail]'
    }
//function that reads the infos in my firebase
ReadFromDb(doc => info.ciy = doc.data().City) 
let counter = 0;
function createData(name, age, city, state, mail) {
    counter += 1;
    return { id: counter, name, age, city, state, mail};
}   
let data = [
       createData(info.name, info.age, info.city, info.state, info.e_mail),
     ];

Я ожидаю, что данные могут быть изменены после запуска функций ReadFromDb.

Answer 1

Создать state.name (который является массивом). Добавьте функцию componentWillMount() и соберите данные из моего firebase и объедините все имена, собранные в моем state.name. В моем рендере я использовал имя из this.state и создал цикл while, который сравнивает размер моего массива и помещает в данные let (который также является массивом) функции, которые создают мои столбцы.

state = {
nome: []
}

componentWillMount(){
   let i = 0;
   //function that read my firebase
   while(i !== size_of_elements_in_my_firebase){
    db.collection("Usuários").doc(doc.ids[i].id).get().then(resposta => {
          this.setState({ 
            name : this.state.name.concat([resposta.id]),
            })
        })
   i++
   }
}
newCreateData(name){
    return {name}
  }

//in my render
const { nome, idade, cidade, estado, e_mail, tamanho } = this.state;
let i = 0;
    let data = []
    while(i !== tamanho){
      data[i] = this.newCreateData(nome[i], idade[i], cidade[i], estado[i], e_mail[i]);
      i++;
    }

return(
      <MUIDataTable
        title={"Firestore data"}
        data={data}
        columns={columns}
        options={options}
      />
    )