Question

用户注册时我有一个阿拉伯语应用程序，我要求下摆选择他的服务，以阿拉伯语我被迫这样做，将服务保存到数据库中。

因此，如果我选择将状态设置为英语单词并且我有很多单词“ 6”

，那么我就做一个开关来比较这些服务

因此，在下一个屏幕中，我从他选择的基于服务的数据库中获取数据用英文单词表示，因为节点名称以英语

保存

所以我不知道这种方法是否正确，如果不告诉我什么是最好的处理方法，而又不会低于警告！

但是在“调用updateProviderData（）函数”以从“服务”屏幕导航到下一个屏幕“主页”后收到此警告

警告：无法在未安装的状态下执行React状态更新零件。这是空操作，但表示您的内存泄漏应用。要修复，请取消所有订阅和异步任务在componentWillUnmount方法中。

代码

 updateProviderData = () => {
    this.setState({loading: true});
    const {uid, service} = this.state;
    database()
      .ref(`users/${uid}`)
      .update({
        service,
      })
      .then(async () => {
        switch (service) {
          case 'سباكة':
            this.setState({service: 'Plumber'});
            break;
          case 'الكهرباء':
            this.setState({service: 'Electricity'});
            break;
          case 'دهانات':
            this.setState({service: 'Dyeing'});
            break;
          case 'تلفاز ستالايت':
            this.setState({service: ' Satellite'});
            break;
          case 'التنظيف':
            this.setState({service: 'Cleaning'});
            break;
          case 'المكيفات':
            this.setState({service: 'Air'});
            break;
          default:
            break;
        }
        await AsyncStorage.setItem('logged', "True");
        this.props.navigation.navigate('Home', {
          service
        });
      })
      .then(() => this.setState({loading: false}));
  };

Answer 1

我只保存带有键和字符串对的本地化json或xml文件。根据语言加载本地化文件。并将它们加载到字典对象中，然后调用它，它将为您提供正确的单词。

这样，如果您添加一种新语言，则只需要一个新文件，而无需为每种语言添加另一个switch语句。此外，这还允许您更新本地化文件中的单词，并且它们的键永远不会改变。如果您的硬编码字符串很糟糕，因为某个位置的拼写错误可能会在其他位置破坏它。

Answer 2

忽略了您可能应该以不同的方式处理本地化的事实。

收到错误消息的原因特别是因为您在未安装的组件上调用setState，当您执行以下操作导航到“ home”时，“ service”组件将被破坏：

this.props.navigation.navigate('Home', {
    service
});

具体来说，此行引起警告：

// setState is called after component is unmounted
.then(() => this.setState({loading: false}));

Answer 3

我使用的一种方法（在花哨的i18n选项之前）是使用翻译创建json文件。属性名称是您的关键字，在所有语言文件中都是一致的。这使您能够仅管理一个版本（例如英语），然后将其交给翻译您的内容的任何人。您最终将所有这些json文件存储在一个目录中，并且在网站加载时，您可以基于window.navigator.language

之类的内容加载特定语言。

使用select选择您要使用的语言的伪造场景示例。两个变量en和fr是如何构造json文件的示例。

关于要保存在数据库中的内容，我只存储密钥，看看是否能将您带到需要的位置。这样，该键就可以在您所针对的任何语言中引用正确的短语，而不会出现任何问题。但是，随之而来的可能是其他挑战，例如当密钥仍在数据库中时就将其删除。

const en = {
  welcomeMessage: 'Welcome to the app'
};

const fr = {
  welcomeMessage: 'bienvenue dans l\'appli'
};

document.getElementById('languageSelector').addEventListener('change', e => {
  switch(e.target.value) {
    case 'en':
      document.getElementById('welcomeMessage').innerText = en.welcomeMessage;
      break;
    case 'fr':
      document.getElementById('welcomeMessage').innerText = fr.welcomeMessage;
      break;
  }
});

<select id="languageSelector">
  <option value="en">English</option>
  <option value="fr">French</option>
</select>

<h1 id="welcomeMessage"></h1>

我还是建议您研究一种合适的i18n解决方案。因为那是2019年。

（如果您使用的是Angular）https://angular.io/guide/i18n
（如果您使用的是React）https://www.npmjs.com/package/i18n-react
https://www.npmjs.com/package/i18n

如果以其他语言保存，如何从服务器中获取数据？

3 个答案: