Im using CRA and Axios here, the code will be included.
(我在这里使用CRA和Axios,将包含代码。)
Problem: I want to make a stock chart, a very basic one.(问题:我想制作一个非常基本的股票图表。)
it should function as such, on load component mounts and axios makes a call to the static api (for now) to populate the chart of exchange rates.(它应具有这种功能,在装载组件时,axios会调用静态api(目前)以填充汇率图表。)
as a basic learning point for me to dive deeper im stuck on how to use the value of each key in the object to make it red if its worht less than a usd and green if its worth more.(作为我更深入研究的基本学习点,我坚持要如何使用对象中每个键的值使它的价值小于一美元时变成红色,如果其价值大于一美元则变成绿色。)
I know how to refer to the styling in line but dont know how to access the value of the keys in state setting context.. thanks postman response from api looks like such and populates in the container properly(我知道如何在行中引用样式,但不知道如何在状态设置上下文中访问键的值。.谢谢来自api的邮递员响应看起来像这样,并正确地填充在容器中)
{
"base": "USD",
"rates": {
"GBP": 0.7775366251,
"HKD": 7.8246518358,
"IDR": 14084.997287032,
"ILS": 3.4664496292,
"DKK": 6.7577319588,
"INR": 71.6865617652,
"CHF": 0.994212335,
"MXN": 19.3951890034,
"CZK": 23.0719840839,
"SGD": 1.3629951167,
"THB": 30.1953336951,
"HRK": 6.7249954784,
"EUR": 0.9043226623,
"MYR": 4.1710074154,
"NOK": 9.1411647676,
"CNY": 7.0387050099,
"BGN": 1.768674263,
"PHP": 50.8545849159,
"PLN": 3.8865075059,
"ZAR": 14.7149574968,
"CAD": 1.327455236,
"ISK": 123.259178875,
"BRL": 4.188189546,
"RON": 4.3173268222,
"NZD": 1.5586905408,
"TRY": 5.7079942123,
"JPY": 108.545849159,
"RUB": 63.6969614759,
"KRW": 1178.395731597,
"USD": 1.0,
"AUD": 1.4728703201,
"HUF": 302.3060227889,
"SEK": 9.6097847712
},
"date": "2019-11-22"
}
React code
(反应代码)
import React, { Component } from "react";
import {Link} from "react-router-dom";
import './currency.css';
import { Container, Row, Col } from 'reactstrap';
import axios from'axios'
class Currency extends Component {
constructor(props){
super(props);
this.state = {
subject: "react state",
instructor: "Lukas",
purpose: "to make stacks",
data: {},
isGreater: false,
isLess: false,
isSpecial: false
// queryUrl: "https://api.exchangeratesapi.io/latest?base=USD"
};
}
componentDidMount(){
axios.get('https://api.exchangeratesapi.io/latest?base=USD')
.then(response => {
if (response.data.rates.hasSpecialStuff) {
this.setState({
data: response.data.rates,
isSpecial: true
})
}
this.setState({
data: response.data.rates
})
})
}
render() {
return (
<div>
<Container>
<div id="ratesDiv">
<h2> Current Exchange Rates</h2>
{Object.keys(this.state.data).map(key => <p className={'rateP'} style={this.state.isSpecial ? {backgroundColor: "red"} : {backgroundColor: "transparent"}}>{`${key}, ${this.state.data[key]}`}</p>)}
</div>
</Container>
</div>
);
}
}
export default Currency;
ask by Lukas Simianer translate from so