Estoy tratando de leer un archivo json con un componente de reacción. La idea es poder elegir qué archivo leer en función de la variable default_lang. Esta es la estructura de archivos y cómo estoy tratando de leerlos.
./config.json
{ "enable-lang":{ "es": "spanish", "en": "spanish" }, "default-lang": "en" }./diccionario/espanol.json
{ "title": "Pagina en construccion", "description": "Esta página sigue en construcción" }./diccionario/inglés.json
{ "title": "Page under construction", "description": "This page is still under construction" }./Idioma.js
import {Component} from "react"; import config from "./config.json"; export class Language extends Component { static getUsedDictionary() { let used_lang = "es"; let dictionary_path = `./dictionary/${ config["enable-lang"][used_lang] }.json`; return import(`${dictionary_path}`); } static getText (id) { let dictionary = this.getUsedDictionary(); console.log("Dictionary value in getText:" + dictionary); console.log("Dictionary[id] value in getText:" + dictionary); if(dictionary[id] !== undefined) { return dictionary[id]; } else { return dictionary['text-not-found']; } } }diccionario y valor de diccionario[id] en la función getText. Puedo ver esto en la consola
Dictionary value in getText:[object Promise] Dictionary[id] value in getText:[object Promise]¿Por qué no usar react-i18next ?
O carga todo lo anterior y elige cuál usarás
import() devuelve una Promesa, por lo que para tener eso en cuenta, tendría que refactorizar el código de la siguiente manera:
import {Component} from "react"; import config from "./config.json"; export class Language extends Component { static getUsedDictionary() { let used_lang = "es"; let dictionary_path = `./dictionary/${ config["enable-lang"][used_lang] }.json`; return import(`${dictionary_path}`); } async static getText (id) { let dictionary = await this.getUsedDictionary(); console.log("Dictionary value in getText:" + dictionary); console.log("Dictionary[id] value in getText:" + dictionary); if(dictionary[id] !== undefined) { return dictionary[id]; } else { return dictionary['text-not-found']; } } } Para completar la solución, sería una buena idea manejar posibles excepciones provenientes de getUsedDictionary() ya que la solicitud puede fallar. Una opción moderna sería ir con un límite de error o podría hacer algún otro tipo de manejo.
Tenga en cuenta que es probable que tenga que acomodar su código para lidiar con getText asíncrono después de este cambio.