[英]How to populate select dropdown elements with data from API - ReactJS
我对React很陌生。 我正在从API提取数据,查看控制台日志时可以看到数据。 但是我不知道如何使用map()创建一个新的数组,然后选项元素就可以使用该数组显示货币代码。
当前,它填充下拉列表,但是选项元素都为空,结果显示为NaN。
以下是我在其中提取数据的代码示例。
state = {
currencies: [],
base: "USD", //default value
amount: "",
convertTo: "EUR",
result: ""
};
componentDidMount() {
fetch("https://api.exchangeratesapi.io/latest")
.then(response => {
return response.json();
})
.then(data => {
let currenciesFromApi = Object.keys(data.rates);
console.log(currenciesFromApi);
this.setState({
currencies: currenciesFromApi
});
})
.catch(error => {
console.log(error);
});
}
预期结果:将使用来自API的货币代码(例如GBP,EUR,USD)填充下拉列表,并使用显示汇率而不是NaN的值填充。
实际结果:下拉列表为空,选择任何一个也将返回Nan。
我检查了源代码,似乎货币数组仅包含字符串值。 因此,当您通过它们映射以呈现选项时,只需将变量直接用作字符串即可。
{this.state.currencies.map(currency => (
<option key={currency} value={currency}>
{currency}
</option>
))}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.