reactjs - 如何使用 React js 获取 alpha vantage api 库存

Question

我正在尝试在 ReactJS 中获取 alpha vantage api 库存响应数据。我不知道该怎么做..有人可以帮我吗？在此先感谢，我真的很感激所提供的任何帮助或建议。对于我想在表中显示信息。

import React from 'react';

import './App.css';
import { useState,useEffect } from 'react';
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

function App() {

  const columns = [
    { headerName: "Open", field: "1. open" },
    { headerName: "High", field: "2. high" },
    { headerName: "Low", field: "3. low" },
    { headerName: "Close", field: "4. close" },
    { headerName: "Adjusted Close", field: "5. adjusted close"}
    ];
  
 
  
    const [rowData, setRowData] = useState([]);
    const API_KEY = 'api key';
    let StockSymbol = 'FB';
    let API_Call = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=${StockSymbol}&apikey=${API_KEY}`;
    
   
    useEffect(() => {
    fetch(API_Call)
    .then(res => res.json())
    .then(data => data.Time_series_daily)
    .then(Time_series_daily =>
    Time_series_daily.map(stock => {
  return {
  
    Open: stock['1. open'],
    High: stock['1. high'],
    Low:  stock['1. low'],
    Close: stock['1. close'],
    Adjusted_Close: stock['1. adjusted close'],
  };
  })
  )
  .then(boo => setRowData(boo));
  }, []);
  
    return (
      <div
      className="ag-theme-balham"
      style={{
      height: "300px",
      width: "800px"
      }}
      >
      <AgGridReact columnDefs={columns} rowData={rowData} />
      </div>
      );
}



export default App;

标签： reactjs