Доступ к данным Ax ios (Объекты) - PullRequest
Новая
       3

Доступ к данным Ax ios (Объекты)

0 голосов
/ 28 февраля 2020

Мне нужны данные "Ежемесячные временные ряды" в this.state = {stockOne: []}. Однако, поскольку форматирование данных API «Monthly Time Series» не имеет [] вокруг объектов, у меня возникают трудности с доступом к данным. Есть ли способ отформатировать это для доступа к данным и вставить в this.state?

РЕДАКТИРОВАТЬ: я был в состоянии console.log (this.state.stockOne) и (this.state.stockOne ["2020 -02-27 "]) с ответом ниже @ Мохаммед Ашфак. Однако я не могу передать его в StockOne. js с this.props.stockOne, который возвращает пустое [], и this.props.stockOne ["2020-02-27"], возвращая неопределенное значение. 

import React from 'react';
import axios from 'axios';
import StockOne from '.././component/StockOne/StockOne.js'

const apiKey = '11111111111111';


class Main extends React.Component {
    constructor(props) {
        super(props);
          this.state={
              stockOne: []
          };    
    }

    componentDidMount(){
        axios.get(`https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY&symbol=MSFT&apikey=${apiKey}`)
            .then(res=> 
                {this.setState({stockOne:res.data["Monthly Time Series"]},
                console.log(res.data["Monthly Time Series"]),  /*returns {},{},{},...*/
                console.log(res.data), 
                console.log(this.state.stockOne)  /*returns undefined */
                )
            })


    }


    render() {
        return (
            <>
                <StockOne stockOne={this.state.stockOne}/>
            </>
        )
    }
}

export default Main;

API JSON ДАННЫЕ 

{
"Meta Data": {
"1. Information": "Monthly Prices (open, high, low, close) and Volumes",
"2. Symbol": "MSFT",
"3. Last Refreshed": "2020-02-27",
"4. Time Zone": "US/Eastern"
},
"Monthly Time Series": {
"2020-02-27": {
"1. open": "170.4300",
"2. high": "190.7000",
"3. low": "157.9800",
"4. close": "158.1800",
"5. volume": "790184525"
},
"2020-01-31": {
"1. open": "158.7800",
"2. high": "174.0500",
"3. low": "156.5100",
"4. close": "170.2300",
"5. volume": "555989763"
},

 ....}
}

1 Ответ

0 голосов
/ 28 февраля 2020

setState - асинхронная функция. Таким образом, она не будет обновлять значение состояния немедленно. Если вы хотите проверить обновленное значение, передайте функцию обратного вызова в качестве второго аргумента setState и напечатайте состояние vaue внутри этого cb. 

 componentDidMount(){
   axios.get(`https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY&symbol=MSFT&apikey=${apiKey}`)
     .then(res=> {
         this.setState({stockOne:res.data["Monthly Time Series"] },()=> {
             console.log(res.data["Monthly Time Series"]);  /*returns {},{},{},...*/
             console.log(res.data);
             console.log(this.state.stockOne); 
      })
   })
 }

Начальное значение stockOne должно быть пустым объектом {}, поскольку ответ API res.data ["Monthly Time Series"] также является объектом.

Доступ к значениям объекта 

let User = {name:"steve"}
 //There are two way's to access an Object value

//1. Dot notation
console.log(User.name)

//2. Bracket Notation

console.log(User['name'])
...