问题描述
这是我的代码以及如何使用我的 componentDidMount() 将数据推送到 data={data} 的 MuiDataTable 中。我已经可以从我的用户集合中获取数据,但是,我对如何将它传递到那里的 mui 数据表知之甚少。这是一个 mui 数据表 -
https://www.material-ui-datatables.com/
import React,{Component} from 'react';
import MUIDataTable from "mui-datatables";
import {firestore} from './../../../firebase/firebase.utils';
const columns = ["display Name","Email"];
class UserTable extends Component {
state = { user : null}
componentDidMount() {
firestore.collection('users')
.get()
.then( snapshot => {
const users = []
snapshot.forEach(doc => {
const data = doc.data()
users.push(data)
})
this.setState({ users : users})
// console.log(snapshot)
})
.catch(error => console.log(error))
}
render() {
return (
<MUIDataTable
title={"Users"}
columns={columns}
data={data}
// options={options}
/>
);
}
}
export default UserTable;
解决方法
您需要将使用列名格式化的对象数组作为键传递,例如 if (params[i]["coupon_lines"][0] && params[i]["coupon_lines"][0]["code"]){
//
}
。
您需要将状态传递给构造函数,例如:
{"Display Name": value,Email:other value}
然后您只需要将 constructor() {
super();
this.state = { users: [] };
}
传递给 MUIDataTable 道具数据,例如:
this.state.users
例如,我使用 axios ro 获取数据,但这与 firestore 一起使用:
<MUIDataTable
title={"Users"}
columns={this.columns}
data={this.state.users}
// options={options}
/>
使用您的代码,这将是:
import MUIDataTable from "mui-datatables";
import { Component } from "react";
import * as axios from "axios";
class UserTable extends Component {
columns = ["Display Name","Email"];
constructor() {
super();
this.state = { users: [] };
}
componentDidMount() {
axios
.get("/users.json")
.then((res) => {
const userData = res.data.map((u) => {
return {
"Display Name": u.name,Email: u.email
};
});
console.log(userData);
this.setState({
users: userData
});
})
.catch((error) => console.log(error));
}
render() {
return this.state.users ? (
<MUIDataTable
title={"Users"}
columns={this.columns}
data={this.state.users}
// options={options}
/>
) : (
<div>Loading...</div>
);
}
}
export default UserTable;
更新:
在这里你可以找到一个可以使用 Firestore 的 example