来自 mui-datatable 的动态数据答案

【问题标题】：来自 mui-datatable 的动态数据
【发布时间】：2019-08-23 01:43:57
【问题描述】：

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

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 函数运行后可以更改数据。

【问题讨论】：

标签： reactjs firebase mui-datatable

【解决方案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}
      />
    )

【讨论】：