mui-datatable中的动态数据

Question

我正在尝试在我的firebase集合中收集一些信息，并添加到mui-datatable中。我怎样才能在我的表格中动态地添加这个信息？

let info = {
      name: 'Leonard',
      age: 23,
      city: 'TESTE',
      state: 'TS',
      e_mail: 'teste@teste.com'
    }
//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}
      />
    )