reactjs - 如何使用这些代码将数据放入 MuiDataTable 中？

Question

这是我的代码，如何使用 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;

标签： reactjsfirebasegoogle-cloud-firestorematerial-uimui-datatable

Answer 1

您需要将使用列名格式化的对象数组作为键传递，例如
{"Display Name": value, Email:other value}.
您需要将状态传递给构造函数，例如：

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

然后你只需要传递this.state.users给 MUIDataTable 道具数据，比如：

 <MUIDataTable
        title={"Users"}
        columns={this.columns}
        data={this.state.users}
        // options={options}
      />

对于示例，我使用 axios ro 获取数据，但这与 firestore 一起使用：

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;

使用您的代码，这将是：

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() {
 firestore.collection('users')
            .get()
            .then( snapshot => {
                const users = []
                snapshot.forEach(doc => {
                    const data = doc.data()
                    users.push({"Display Name":data.displayName, Email: data.email});
      
                });
                  return users;})
             .then(userList => this.setState({users:userList});
              
            })
        .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的工作示例