Me encuentro con un problema muy extraño pero aparentemente simple.
Tengo un objeto llamado vatRates que se parece a esto:
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 } Obtengo una constante llamada countryCode de mi React Context , countryCode tiene un valor predeterminado 'DE' y luego, durante la inicialización del contexto, cambió a "CZ".
countryCode nunca es nulo o indefinido.
En mi componente, quiero obtener el valor de countryCode en el objeto vatRates .
El código debe ser simple, ¿verdad?
console.log(vatRates[countryCode]) pero solo funciona cuando el countryCode de país tiene el valor predeterminado "DE", aunque la clave "CZ" existe en el objeto.
aquí un registro de la consola de lo que estoy recibiendo. Realmente no sé por qué esta simple cosa no funciona.
Cuando accedo al objeto de esta manera manualmente, funciona bien.
vatRates["CZ"]Aquí hay un codesandbox que muestra el problema
todo con su contexto está bien. El problema es que hay algunos espacios en blanco en el valor de la API.
Simplemente use vatRates[countryCode.trim()] o incluso mejor en contexto:
const fetchCountryCode = async () => { const res = await fetch("https://get.geojs.io/v1/ip/country"); const countryCode = await res.text(); return countryCode.trim(); };