无法使用 React Context 中的变量来访问对象的值

Question

我遇到了一个很奇怪但看似简单的问题。

我确实有一个名为 vatRates 的对象，它看起来像这样：

const vatRates = {
  "AD": 0.00,
  "CZ": 1.21,
  "RO": 1.19,
  "DE": 1.19,
  "RS": 0.00,
  "RU": 0.00,
  "SE": 1.25,
  "SI": 1.22,
  "SK": 1.20,
  "TR": 0.00,
  "UA": 0.00,
  "US": 0.00
}

我从我的 React Context 得到一个名为 countryCode 的常量，countryCode 有一个默认值 'DE' 然后在上下文初始化期间更改为“CZ”。

countryCode 永远不会为空或未定义。

在我的组件中，我想获取 vatRates 对象中 countryCode 的值。

代码应该很简单吧？

console.log(vatRates[countryCode])

但它仅在 countryCode 具有默认值“DE”时有效，即使对象上存在键“CZ”。

这里是我得到的控制台日志。我真的不知道为什么这个简单的东西不起作用。

当我像这样手动访问对象时，它工作正常。

vatRates["CZ"]

这里有一个 codesandbox 显示了问题

Answer 1

与您的上下文相关的一切都可以。问题是 API.

的值中有一些空格

只需使用 vatRates[countryCode.trim()] 或在上下文中更好：

 const fetchCountryCode = async () => {
      const res = await fetch("https://get.geojs.io/v1/ip/country");
      const countryCode = await res.text();

      return countryCode.trim();
 };

无法使用 React Context 中的变量来访问对象的值

Cant use variable from React Context to access value of object

javascript

string

object

reactjs

react-context