我如何将包含 objects 数组的 JSON API 响应映射到 ag-grid table

Question

我想将从 API 获得的响应映射到 AgGridReact 组件。该页面的要点是让用户输入股票市场代码，然后可以选择输入 select 日期以查找两个日期之间的股票价格。我可以联系 API 就好了。我收到的回复就像这里的一样JSON Response。响应是一个包含多个 objects 的数组（取决于搜索）。我遇到问题的地方是获取响应并将其映射到 ag-grid-react table。

这是 table headers

的代码

const columns = [
  { headerName: "Sybmol", field: "symbol" }, 
  { headerName: "Name", field: "name" }, 
  { headerName: "Open", field: "open" }, 
  { headerName: "High", field: "high" }, 
  { headerName: "Low", field: "low" }, 
  { headerName: "Close", field: "close" }, 
  { headerName: "Volumes", field: "volumes" }, 
  { headerName: "Time", field: "time" }, 
]

最初我认为它会像法线贴图函数一样工作：

useEffect(() => {
  fetch(url, { headers })
    .then(res => res.json())
    .then(data => data.stocks)
    .then(stocks =>
        stocks.map(stock => {
          return{
            sybmol: stock.symbol,
            name: stock.name,
            //etc...
          }
        }))
}, [search, FromDate, ToDate])

然而，这给了我错误未处理的拒绝（类型错误）：无法读取未定义的属性'map'

这是JSON请求的数据

   (17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {timestamp: "2020-03-23T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 10.9, …}
1: {timestamp: "2020-03-22T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 10.6526, …}
2: {timestamp: "2020-03-19T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 11.6, …}
3: {timestamp: "2020-03-18T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 14.24, …}
4: {timestamp: "2020-03-17T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 15.785, …}
5: {timestamp: "2020-03-16T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 12.4065, …}
6: {timestamp: "2020-03-15T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 15.3, …}
7: {timestamp: "2020-03-12T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 14.05, …}
8: {timestamp: "2020-03-11T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 16.31, …}
9: {timestamp: "2020-03-10T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 15.82, …}
10: {timestamp: "2020-03-09T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 14.87, …}
11: {timestamp: "2020-03-08T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 15.02, …}
12: {timestamp: "2020-03-05T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 17.54, …}
13: {timestamp: "2020-03-04T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 18.36, …}
14: {timestamp: "2020-03-03T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 19.66, …}
15: {timestamp: "2020-03-02T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 19.05, …}
16: {timestamp: "2020-03-01T14:00:00.000Z", symbol: "AAL", name: "American Airlines Group", industry: "Industrials", open: 19.8, …}
length: 17
__proto__: Array(0)

页面代码（无法包含 API 信息，因为那是私人信息）

import React, { useState, useEffect, }from 'react';
import './Quote.css';
import { Button, Form, FormGroup } from 'reactstrap';
import SearchStocks from './SearchStocks';
import { AgGridReact } from "ag-grid-react";

function SearchBar(props){
  const [innerSearch, setInnerSearch] = useState('');

  return (
    <div>
      <label className="CheckStocks-SearchBar-Label" htmlFor="search">Search By Symbol:</label>
      <input className="CheckStocks-SearchBar" name="search" id="search" type="search" value={innerSearch} onChange={(e) => setInnerSearch(e.target.value)} />
      
      <Button className="CheckStocks-SearchBar-Button" color="primary" size="lg" id="search-button" type="button" 
              onClick={() => props.onSubmit(innerSearch)}>
        Search
      </Button>
    </div>
  );
}

function FromDateSelector(props){
  const [innerDate, setInnerDate] = useState('');
  

  return(
    <div>
      <input type="date" value={innerDate} onChange={(e) => setInnerDate(e.target.value)} />
      <button onClick={() => props.onSubmit(innerDate)}>Select From Date</button>
    </div>
  )
}

function ToDateSelector(props){
  const [innerDate2, setInnerDate2] = useState('');
  

  return(
    <div>
      <input type="date" value={innerDate2} onChange={(e) => setInnerDate2(e.target.value)} />
      <button onClick={() => props.onSubmit(innerDate2)}>Select To Date Date</button>
    </div>
  );
}


function GetStocks(search, FromDate, ToDate) {
  

  const [ rowData, setRowData ] = useState([]);
  

  let token = localStorage.getItem("token");
  const headers = {
    accept: "application/json",
    "Content-Type": "application/json",
    Authorization: `Bearer` + //Usually a token as well
  }
  
  let FromDateLink = '?from=' + FromDate
  const url = 'TheAPiUrl' + search + FromDateLink;

  function ApiCall(){
    fetch(url, { headers })
    .then((res) => res.json())
  }

useEffect(() => {
  fetch(url, { headers })
    .then(res => res.json())
    .then(data => data.stocks)
    .then(stocks =>
        stocks.map(stock => {
          return{
            sybmol: stock.symbol,
            name: stock.name,
            //etc...
          }
        }))
}, [search, FromDate, ToDate])

  return{
    rowData,
  }
  
}


function Quote() {
  
  const [search, setSearch] = useState('');
  const [FromDate, setFromDate] = useState('');
  const [ToDate, setToDate] = useState('');
  const { rowData } = GetStocks(search, FromDate, ToDate);
  

  return(
    <div>
      <h1 className="Quote-Title">Quote Page</h1>
      <div className="Quote-Search-Box">
        <SearchBar onSubmit={setSearch} />
        <FromDateSelector onSubmit={setFromDate} />
        <ToDateSelector onSubmit={setToDate} />
        <h1>{search}</h1>
        <br></br>
        <h1>{FromDate}</h1>
        <h1>{ToDate}</h1>
        
        
      </div>
    </div>
  )
}


export default Quote;

我关于堆栈溢出的第一个问题。谢谢你的帮助。

Answer 1

您应该将 API 请求返回的响应存储到组件的状态中。

const [ data, setData ] = useState([]);

并且在您的 GetStocks 方法中，您需要在返回响应后更新状态：

useEffect(() => {
  fetch(url, { headers })
    .then(res => res.json())
    .then(data => data.stocks)
    .then(stocks =>
      const res = stocks.map(stock => ({
        sybmol: stock.symbol,
        name: stock.name,
        //etc...
      }));
      setData(res);
    );
}, [search, FromDate, ToDate]);

最后，在呈现的 AgGridReact 本身上，您需要将数据传递给 rowData 道具：

<AgGridReact
  rowData={data}>
  // other props such as columnDefs
</AgGridReact>

我如何将包含 objects 数组的 JSON API 响应映射到 ag-grid table

How do i map a JSON API response that contains an array of objects to an ag-grid table

javascript

json

reactjs

ag-grid

react-hooks