Javascript 将API批处理库存对象映射到库存数组| React

我使用axios和react来查询alpha vantage api。我有api部分工作。我想弄清楚的是，如何映射到我正在提取的数据，以便从数据生成项目列表。我想使用map创建一个名为stocks的数组，然后为每个项目创建一个对象，其中包含我可以使用的符号、价格、数量和时间戳。如何正确地执行此操作

以下是我的地图功能：

axios.get(axios.get(url)
.then(res => {
  console.log(res.data['Stock Quotes']);
  const stocks = res.data['Stock Quotes'].map((stock) => [{symbol: stock.symbol, price: stock.price}])
})
.catch(error => console.log(error))
)

这是从console.log（res.data['stockquotes']）返回的内容

这是从console.log（stocks）返回的内容

这是我正在使用的完整代码

import React, { Component } from 'react';
import axios from 'axios';
import SearchBar from './components/search_bar';
import './App.css';

class App extends Component {
  constructor() {
    super();

this.state = {
  stocks: [],
  term: null,
  value: ''
};

this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
}

handleChange(e) {
this.setState({
  value: e.target.value
});
}

handleClick(e) {
  if(e) e.preventDefault();

  this.setState({
    value: '',
    term: this.state.value,
    stocks: this.state.stocks
  });

let term = this.state.value;
const key = 'F41ON15LGCFM4PR7';
const url = `https://www.alphavantage.co/query?function=BATCH_STOCK_QUOTES&symbols=${term}&apikey=${key}`;

axios.get(axios.get(url)
.then(res => {
  console.log(res.data['Stock Quotes']);
  const stocks = res.data['Stock Quotes'].map((stock) => [{symbol: stock.symbol, price: stock.price}])
})
.catch(error => console.log(error))
)

}

render () {
const value = this.state.value;
return (
  <div className="App">
    <h1>Stock Search</h1>
    <SearchBar value={ value }
               onChange={ this.handleChange }
               onClick={ this.handleClick }/>
  </div>
);
}
}
export default App;

import React，{Component}来自'React'；
从“axios”导入axios；
从“./components/search_bar”导入搜索栏；
导入“/App.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
股票：[]，
术语：空，
值：“”
};
this.handleClick=this.handleClick.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
手变（e）{
这是我的国家({
价值：即目标价值
});
}
handleClick（e）{
如果（e）e.preventDefault（）；
这是我的国家({
值：“”，
术语：this.state.value，
股票：this.state.stocks
});
让term=this.state.value；
常量键='F41ON15LGCFM4PR7'；
常量url=`https://www.alphavantage.co/query?function=BATCH_STOCK_QUOTES&symbols=${term}&apikey=${key}`；
axios.get（axios.get（url）
。然后（res=>{
console.log（res.data['stockquotes']）；
const stocks=res.data['Stock Quotes'].map（（Stock）=>[{symbol:Stock.symbol，price:Stock.price}]）
})
.catch（错误=>console.log（错误））
)
}
渲染（）{
常量值=this.state.value；
返回(
股票搜索
);
}
}
导出默认应用程序；

看起来每个“股票报价”的“符号”的整个键实际上是

“1.symbol”

，而不仅仅是

“symbol”

（对于价格，它是

“2.price”

）

我不知道为什么会出现这种情况，但以下几点应该有效：

const stocks = res.data['Stock Quotes'].map((stock) => [{symbol: stock['1. symbol'], price: stock['2. price']}])

---

甚至

Array.from（res.data['Stock Quotes]）.map（…）

都不起作用？只是尝试了一下。它生成相同的-未定义的@guijob@guijob作为旁注，

Array#from

可以将

map

函数作为第二个参数谢谢，就这样！我本应该弄明白的，因为['Stock Quotes']也需要括号。这是一个特殊的小api。。。

import React, { Component } from 'react';
import axios from 'axios';
import SearchBar from './components/search_bar';
import './App.css';

class App extends Component {
  constructor() {
    super();

this.state = {
  stocks: [],
  term: null,
  value: ''
};

this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
}

handleChange(e) {
this.setState({
  value: e.target.value
});
}

handleClick(e) {
  if(e) e.preventDefault();

  this.setState({
    value: '',
    term: this.state.value,
    stocks: this.state.stocks
  });

let term = this.state.value;
const key = 'F41ON15LGCFM4PR7';
const url = `https://www.alphavantage.co/query?function=BATCH_STOCK_QUOTES&symbols=${term}&apikey=${key}`;

axios.get(axios.get(url)
.then(res => {
  console.log(res.data['Stock Quotes']);
  const stocks = res.data['Stock Quotes'].map((stock) => [{symbol: stock.symbol, price: stock.price}])
})
.catch(error => console.log(error))
)

}

render () {
const value = this.state.value;
return (
  <div className="App">
    <h1>Stock Search</h1>
    <SearchBar value={ value }
               onChange={ this.handleChange }
               onClick={ this.handleClick }/>
  </div>
);
}
}
export default App;

const stocks = res.data['Stock Quotes'].map((stock) => [{symbol: stock['1. symbol'], price: stock['2. price']}])