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

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>
    );
}

这里要注意的第一件事是getItem根据documentation返回JavaScript Promise。通过JavaScript的工作方式，我们不能从Promises中获取值并将其导出，而无需 resolved 或 rejecting Promise，更多的是here。为了用示例进行解释，您可以为exportingLang分配一个值，但是几乎可以肯定会返回初始化它的初始空对象{}，因为Promise分配是异步发生的，也就是说，它需要等待存储系统找到@lang键，然后返回其值，这可能需要一段时间（因此需要Promise）。

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

lang.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中的值直接用于React渲染方法中。您需要使用useState或useEffect将其分配给一个状态。您可以在此here上阅读更多内容。

为简单起见，我在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>
    );
  }
}

如果您还有其他疑问，请告诉我。