Как экспортировать объект на основе условий в реагировать-нативный?

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;

file : post.js

import {Lang} from 'lang';

export default Post = props => {

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

, но приведенный выше код не работает.

Answer 1

Первое, на что следует обратить внимание, это то, что getItem возвращает JavaScript Promise в соответствии с документацией . Работая JavaScript, мы не можем получить значения из Обещаний и экспортировать их без разрешения или отклонения Обещания, подробнее об этом здесь . Чтобы объяснить это с помощью вашего примера, вы можете присвоить значение к exportingLang, но он почти наверняка вернет исходный пустой объект {}, к которому вы его инициализировали, потому что присвоение Promise происходит асинхронно, то есть ему нужно ждать чтобы система хранения нашла ключ @lang, а затем верните его значение, которое может занять некоторое время (отсюда и необходимость в Promise).

Если смысл файла lang.js состоит в том, чтобы не набирать текст операторы if снова и снова, тогда все в порядке (в противном случае я бы просто использовал Promise getItem один раз в компоненте, в котором мне нужно значение). Сначала я должен убедиться, что мы экспортируем результаты, полученные из Обещания, следующим образом:

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

Это, в свою очередь, даст мне другое Обещание в качестве экспорта.

Во-вторых, вы не можете использовать значения напрямую из Обещания в метод рендеринга 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>
    );
  }
}

Пожалуйста, дайте мне знать, если у вас есть еще вопросы.

Answer 2

Почему бы не сохранить значение 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>
    );
}