如何根据 react-native 中的条件导出对象？

Question

我想based on conditions导出一个对象，例如首先我检查一些存储在“AsyncStorage”中的语言，然后根据语言返回一个特定的object 。

文件： lang.js

import AsyncStorage from '@react-native-community/async-storage';
let exportingLang = {};

AsyncStorage.getItem('@lang').then(language=> {
    if(language){
        if(language === "hindi") exportingLang = {
           name: 'a hindi name'
        };
        else if(language === "panjabi") exportingLang = {
           name: 'a panjabi name'
        };
        else exportingLang = {
           name: 'a english name'
        };;
    }
});

export const Lang = exportingLang;

文件： post.js

import {Lang} from 'lang';

export default Post = props => {

    return (
        <Text>{Lang.name}</Text>
    );
}

但上面的代码不起作用。

Answer 1

为什么不将exportingLang的值存储在 state 中，然后在您的组件中使用它？

import AsyncStorage from '@react-native-community/async-storage';

export default Post = props => {

    const [name, setName] = useState()

    AsyncStorage.getItem('@lang').then(language=> {
        if(language){
            if(language === "hindi") {
               setName('a hindi name')
            } else if(language === "panjabi") {
               setName('a punjabi name')
            } else {
               setName('an english name')
            };
        }
    });


    return (
        <Text>{name}</Text>
    );
}

Answer 2

这里首先要注意的是getItem根据文档返回一个 JavaScript Promise 。 根据 JavaScript 的工作方式，我们无法在不解析或拒绝Promise 的情况下从 Promise 中获取值并导出它们，更多内容请参见此处。 为了根据您的示例进行解释，您可以为 exportingLang 分配一个值，但它几乎肯定会返回您将其初始化为的初始空对象{} ，因为 Promise 分配是异步发生的，也就是说，它需要等待存储系统找到@lang键，然后返回它的值，这可能需要一段时间（因此需要一个 Promise）。

如果拥有lang.js文件的目的是避免lang.js输入 if 语句，那么一切都很好（否则我只会在我需要该值的组件中使用一次getItem Promise ）。 我首先要确保我们导出从 Promise 返回的结果，如下所示：

语言.js

export default AsyncStorage.getItem('@lang').then(language => {
  let exportingLang = {name: 'default'};
  if (language) {
    if (language === 'hindi')
      exportingLang = {
        name: 'a hindi name',
      };
    else if (language === 'panjabi')
      exportingLang = {
        name: 'a panjabi name',
      };
    else
      exportingLang = {
        name: 'a english name',
      };
  }
  return exportingLang;
});

这反过来又会给我另一个 Promise 作为出口。

其次，您不能直接将 Promise 中的值用于 React 渲染方法。 您需要使用useState或useEffect将其分配给一个状态。 您可以在此处阅读更多相关信息。

为简单起见，我在Component使用了它，如下所示：

import langPromise from './lang';

export default class App extends Component {
  state = {
    lang: { name: '' },
  };

  async componentDidMount() {
    const lang = await langPromise.then(lang => this.setState({ lang }));
  }

  render() {
    return (
      <View>
        <Text>{this.state.lang.name}</Text>
      </View>
    );
  }
}

如果您有任何其他问题，请告诉我。