javascript - 从 fetch 获取数据时使用状态变量进行 React-native
问题描述
我正在尝试创建一个简单的 Expo Snack,它可以在用户选择的两种货币之间进行转换。
当有人从下拉列表中选择一个选项时,我有两个状态变量会更新,我想使用这些状态变量的值从获取中获取数据。
<Picker
selectedValue={this.state.curr1}
style={{ height: 25, width: 125 }}
onValueChange={(itemValue, itemIndex) => this.setState({ curr1: itemValue })}>
<Picker.Item label="US Dollar" value="USD" />
<Picker.Item label="Euro" value="EUR" />
</Picker>
所以在这里我将状态变量的值设置为美元或欧元。
convert() {
fetch('https://open.exchangerate-api.com/v6/latest')
.then((response) => response.json())
.then((json) => {
const currency1 = this.state.curr1;
const currency2 = this.state.curr2;
alert(currency1);
alert(currency2);
const currRate1 = json.rates.currency1;
const currRate2 = json.rates.currency2;
alert(currRate1);
alert(currRate2);
这就是我卡住的地方。第一个警报 (Currency1&2) 显示值为 USD 和 EUR。但是,当尝试使用它们来调用下半年的费率时,我对两者都“未定义”。
如果我做
json.rates.EUR;
json.rates.USD;
它正确调用费率。无法准确确定如何格式化,因此我可以使用选择器中的状态变量来调用费率。
解决方案
因为 currency1 和 currency2 的值是字符串,所以您会变得未定义。要将这些值用作属性,您应该添加括号:
json.rates.[currency1]
json.rates.[currency2]
推荐阅读
- html - CSS 转换为 div 提供轮廓
- x86-64 - 64 位机器中虚拟地址的高 16 位设置为零。为什么?
- javascript - Height not increasing using setInterval (creating border around screen)
- java - 解释模拟匹配(str)与相同(str)的这种行为的原因
- angular - Angular6从HTML调用组件
- r - 从 R 中是和否值的两列导出列联真值表
- python - 使用 lambda 的字典理解将内存地址作为值返回
- python - python - 在混合类型列表中查找最后两个数字的索引
- javascript - 如何设置元素的索引
- c++ - 如何用强盗转换这个类型列表?