使用Firebase在React中渲染表

Question

我真的希望你能帮助我。我本质上是尝试使用React和Firebase将以下内容呈现给网页。这仅适用于最终用户的读取访问（我将在以后想要过滤和搜索）。

我在Firebase中有以下数据。

Firebase Data

如果有更好的方法在Firebase中使用此功能，那么我会对这些想法持开放态度。

我编写了以下代码，使用JSON对象呈现我的数据，并提供我想要的结果。

我的问题是如何编写此代码以合并我所描述的firebase数据库？

＆＃13;

＆＃13;

import React from 'react';
import './App.css';

export function stockdata() {
  return [{
    "Close" : 5.25,
    "DateofAnalysis" : "2018-08-01T23:00:00.000Z",
    "Ticker" : "VOXX"
  }, {
    "Close" : 14.97,
    "DateofAnalysis" : "2018-08-01T23:00:00.000Z",
    "Ticker" : "BVDRF"
  }, {
    "Close" : 59.16,
    "DateofAnalysis" : "2018-08-01T23:00:00.000Z",
    "Ticker" : "JBSS"
  }, {
    "Close" : 82.04,
    "DateofAnalysis" : "2018-08-01T23:00:00.000Z",
    "Ticker" : "MGPI"
  }, {
    "Close" : 47.59,
    "DateofAnalysis" : "2018-08-01T23:00:00.000Z",
    "Ticker" : "SMP"
  }, {
    "Close" : 41.35,
    "DateofAnalysis" : "2018-08-01T23:00:00.000Z",
    "Ticker" : "ADM"
  }, {
    "Close" : 16.46,
    "DateofAnalysis" : "2018-08-01T23:00:00.000Z",
    "Ticker" : "FUJHY"
  } ]
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        json: []
    }
}

componentDidMount() {
    this.setState({
      json: stock()
    })
}

render() {
    return (
        <div>
            <table>
                <thead>
                    <th>Close</th>
                    <th>Date</th>
                    <th>Ticker</th>
                </thead>
                <tbody>
                    {this.state.json.map((data, i) => {
                        return (
                            <tr key={i}>
                                <td>{data.Close}</td>
                                <td>{data.DateofAnalysis}</td>
                                <td>{data.Ticker}</td>
                            </tr>
                        )
                    })}
                </tbody>
            </table>
        </div>
    )
  }
}


export default App;

＆＃13;

＆＃13;

＆＃13;