javascript - 如何将包含对象数组的 JSON API 响应映射到 ag-grid 表
问题描述
我想将从 API 获得的响应映射到AgGridReact
组件。该页面的要点是让用户输入股票市场代码,然后可选择选择日期以查找两个日期之间的股票价格。我可以很好地联系 API。我收到的响应就像这里的JSON Response一样。响应是一个包含多个对象的数组(取决于搜索)。我遇到的问题是获取响应并将其映射到 ag-grid-react 表。
这是表格标题的代码
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])
但是,这给了我错误Unhandled Rejection (TypeError): Cannot read property 'map' of undefined
这是请求的 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;
我关于堆栈溢出的第一个问题。谢谢你的帮助。
解决方案
您应该将 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>
推荐阅读
- flutter - StreamBuilder 触发方法两次,而与变量相同的操作仅触发一次
- c - C strchr 在 HPUX 上使用 NULL 值,但在 RHEL 上使用 segfaults
- jquery - 如何以编程方式展开选定的树视图节点
- cxf - 独立 .jar org.apache.cxf.wsdl11.WSDLServiceFactory 上的空指针
- html - 如何在引导程序中将两个 div 放在同一行
- r - 如何使用 R 中的 plm 包测量一对个体的固定效应?
- laravel - 如何在 VestaCP 的单个项目中启用让我们为多个域加密 SSL?
- android - 是否可以在 Android 中使用 .mlmodel 并使用 Playground(Xcode)进行训练?
- math - 回归输出 - 是否可以仅使用系数及其 p 值计算系数的标准误差?
- firebase - Cloud Functions 模拟器中未显示写入 Cloud Firestore(模拟器)