使用来自 firebase 的数据填充 React-Table

Question

我有一个 table 组件，我正试图从 Firebase 填充它。我有 3 个字段需要填充： Name Date Comment

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

当我尝试填充 table 时，我得到的是 undefined 而不是实际条目....

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, setComment, handleClick, data, date, 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;

Answer 1

您必须修改以下代码。 API 响应没有返回给变量。

import React, { useEffect, useState } from 'react';
import ReactTable from 'react-table'
import 'react-table/react-table.css'
import axios from 'axios';

const Table = (props) => {
  const [data, setData] = useState({});

  useEffect(() => {
    axios.get("https://lq-time-tracking.firebaseio.com/user.json")
      .then(function(response) {
        setData(response.data);
      }).catch(function(error) {
        console.log(error);
      })
  }, []);

  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;

我已经根据你的数据完成了。您必须获取响应并将响应传递给函数组件 props。

https://stackblitz.com/edit/react-dqnteu

使用来自 firebase 的数据填充 React-Table

Populate React-Table with data from firebase

javascript

reactjs

axios

react-table