如何将数据放入MUI-DataTables中？

Question

这是我的代码，如何使用我的componentDidmount（）将数据= {data}的muidataTAttion推出。我已经可以从用户集合中获取数据，但是，我对MUI DataTable的了解还不够多。这是一个MUI DataTable-

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;

Answer 1

您需要将用列名称格式化的对象数组作为键，例如

。

您需要将状态传递到构造函数：

{"Display Name": value, Email:other value}

然后您只需要通过

 constructor() {
    super();
    this.state = { users: [] };
  }

to to muidataitable props数据，例如：

this.state.users

在示例中，我使用了axios rot fetch数据，但是这与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;

update
： 在这里，您可以找到使用Firestore的工作
示例