首页 > 解决方案 > 从 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;

它正确调用费率。无法准确确定如何格式化,因此我可以使用选择器中的状态变量来调用费率。

标签: javascriptreactjsexpo

解决方案


因为 currency1 和 currency2 的值​​是字符串,所以您会变得未定义。要将这些值用作属性,您应该添加括号:

json.rates.[currency1]
json.rates.[currency2]

推荐阅读