我有一个要从Firebase填充的表格组件。我有3个字段需要填充： Name Date Comment

我需要为每个条目添加一行，我已经成功添加了数据透视。

当我尝试填充表格时，我得到的是不确定的而不是实际的条目。...

index.js

import React,{ Component,Fragment,useState } from "react";
import { render } from "react-dom";
import axios from "axios";
import firebase from "firebase";

import Header from "./components/Header";
import "./style.css";

const App = () => {
  const [comment,setComment] = useState("New Comments Please");
  const [date,setDate] = useState('');

  const handleclick = e => {
    console.log("Working");
    axios
      .post(`https://lq-time-tracking.firebaseio.com/user/${user()}.json`,{
        comment,date
      })
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  };
  const data = () => {
    axios
      .get("https://lq-time-tracking.firebaseio.com/user.json")
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  };

  const user = () => document.getElementById("theDropdown").value;

  return (
    <div>
      <Header
        comment={comment}
        setComment={setComment}
        date={date}
        setDate={setDate}
        handleclick={handleclick}
        data={data}
      />
    </div>
  );
};

render(<App />,document.getElementById("root"));

header.js

import React from "react";
import styled from "styled-components";

import { BrowserRouter as Router,Switch,Route,Link } from "react-router-dom";
import Home from "./Home";

import "../style.css";

const Header = ({
  comment,handleclick,setComment,selectChanged,data,date,setDate
}) => {
  return (
    <Router>
      <nav classname="navbar">
        <Link classname="nav-item" to="/contact">
          Contact
        </Link>
        <Link classname="nav-item" to="/about">
          Data
        </Link>
        <Link classname="nav-item" to="/home">
          Home
        </Link>
      </nav>
      <Switch>
        <Route
          exact
          path="/home"
          render={(...props) => (
            <Home
              comment={comment}
              setComment={setComment}
              date={date}
              setDate={setDate}
              handleclick={handleclick}
              data={data}
            />
          )}
        />
      </Switch>
    </Router>
  );
};

export default Header;

home.js

import React,{ Fragment } from "react";
import { Container,Row,Col } from "reactstrap";

import Form from "./components/Form";
import Table from "./components/Table";

const Home = ({ comment,setDate }) => {
  return (
    <Container>
      <Row>
        <Form
          comment={comment}
          setComment={setComment}
          date={date}
          setDate={setDate}
          handleclick={handleclick}
          data={data}
        />
      </Row>
      <Row>
        <Table />
      </Row>
    </Container>
  );
};

export default Home;

table.js

import React from 'react';
import ReactTable from 'react-table'
import 'react-table/react-table.css'
import axios from 'axios';

const Table = (props) => {
  const getData = [axios.get("https://lq-time-tracking.firebaseio.com/user.json").then(function(response) {
        console.log(response);
      }).catch(function(error) {
        console.log(error);
      })]

const data = [{getData}];


  const columns = [{
    id: 'Name',Header: 'Name',accessor: data.user
  },{
    Header: 'Date',accessor: 'Date',},{
    Header: 'Comment',accessor:'Comment' 
  }]

  return <ReactTable
    data={...data}
    columns={columns}
    pivotBy={ ['Date','Name']}
  />
}


export default Table;