Javascript 如何将包含对象数组的JSON API响应映射到ag网格表

我想将从API获得的响应映射到

AgGridReact

组件。该页面的要点是用户输入股票市场符号，然后选择日期以查找两个日期之间的股票价格。我可以很好地联系API。我收到的回复和这里的一样。 响应是一个包含多个对象的数组（取决于搜索）。我遇到的问题是获取响应并将其映射到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])

但是，这给了我错误未处理的拒绝（TypeError）：无法读取未定义的属性“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，useffect，}来自'React'；
导入“/Quote.css”；
从“reactstrap”导入{Button，Form，FormGroup}；
从“./SearchStocks”导入SearchStocks；
从“ag grid react”导入{AgGridReact}；
功能搜索栏（道具）{
const[innerSearch，setInnerSearch]=useState（“”）；
返回(
按符号搜索：
setInnerSearch（e.target.value）}/>
props.onSubmit（innerSearch）}>
搜寻
);
}
函数FromDateSelector（props）{
const[innerDate，setInnerDate]=useState（“”）；
返回(
setInnerDate（e.target.value）}/>
props.onSubmit（innerDate）}>选择自日期
)
}
函数ToDateSelector（道具）{
const[innerDate2，setInnerDate2]=useState（“”）；
返回(
setInnerDate2（e.target.value）}/>
props.onSubmit（innerDate2）}>选择截止日期
);
}
函数GetStocks（搜索、FromDate、ToDate）{
const[rowData，setRowData]=useState（[]）；
让token=localStorage.getItem（“token”）；
常量头={
接受：“应用程序/json”，
“内容类型”：“应用程序/json”，
授权：`Bearer`+//通常也是令牌
}
让FromDateLink='？from='+FromDate
常量url='TheAPiUrl'+搜索+FromDateLink；
函数ApiCall（）{
获取（url，{headers}）
.然后（（res）=>res.json（））
}
useffect（（）=>{
获取（url，{headers}）
.then（res=>res.json（））
.然后（data=>data.stocks）
.然后（股票=>
stocks.map（stock=>{
返回{
sybmol:stock.symbol，
名称：stock.name，
//等等。。。
}
}))
}，[search，FromDate，ToDate]）
返回{
行数据，
}
}
函数引号（）{
const[search，setSearch]=useState（“”）；
const[FromDate，setFromDate]=useState（“”）；
常量[ToDate，setToDate]=useState（“”）；
const{rowData}=GetStocks（搜索、FromDate、ToDate）；
返回(
报价页
{search}



{FromDate}
{ToDate}
)
}
导出默认报价您应该将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>


//其他道具，如columnDefs
您能将json数据添加到问题中吗？谢谢您的回答。然而，我在“const”行上得到一个错误，说“expected{@RileyHead啊..我缺少一个括号。我已经更新了我的答案。我能够让一个朋友解决我的问题。但是，你的答案有一点帮助。我将它标记为正确。谢谢