Вызов функции asyn c, возвращающей объект обещания с использованием машинописного текста на expo - PullRequest
Новая
       83

Вызов функции asyn c, возвращающей объект обещания с использованием машинописного текста на expo

0 голосов
/ 10 июля 2020

Попытка вернуть различные функции (с представлениями) в экспонате машинописного текста на основе условия, установленного в activeStorage.

Если вы посмотрите в код, когда вызывается showIntro, я хочу показать значение, возвращаемое из getScreen, но вместо этого, когда я консолью журнал, он возвращает объект обещания

Когда я консоль журнала await AsyncStorage.getItem('showIntro'); внутри getScreen он дает мне значение. Не уверены, ошибка это или что-то не так с кодом? 

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

const data = [{...}, {...}, {...}]

const getScreen = async () => {
  return await AsyncStorage.getItem('showIntro'); 
}

function App() {
  const [showIntro, updateShowIntro] = React.useState(getScreen());

  const onDone = () => {
     AsyncStorage.setItem('showIntro', false).then(()=>{});
     updateShowIntro(false);
  }

  return (
  { (showIntro) ? (
      <AppIntroSlider
        renderItem={renderItem}
        data={data}
        onDone={onDone}/>
      ) : (
        <ShowApp />
      )
    }
  );
 }

1 Ответ

3 голосов
/ 10 июля 2020

Ваш getScreen возвращает Promise, поскольку вы используете async/await. Что вам нужно сделать, так это вызвать getScreen, когда ваш компонент загружается в первый раз внутри ловушки React.useEffect, а затем обновить состояние showIntro после того, как оно разрешится с любым ожидаемым значением.

Использование функции async/await для «ожидания» разрешения AsyncStorage.getItem("showIntro") с некоторым значением перед возвратом на самом деле не имеет никакого эффекта - вы все еще имеете дело с Promise, которое разрешается после завершения «внутреннего» * ​​1012 *.

Из MDN:

Значение return - это Promise, которое будет разрешено со значением, возвращаемым функцией asyn c, или отклонено с созданием исключения из, или не поймать внутри, функция asyn c. 

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

const data = [{...}, {...}, {...}]

// no need for `async/await` here, using `async/await`
// turns your `getScreen` function into a `Promise`, 
// you get the same exact result, so you might as well 
// call your `AsyncStorage.getItem("showIntro")` function
// directly in the `React.useEffect` hook rather than
// through this `getScreen` function
const getScreen = () => {
  return AsyncStorage.getItem("showIntro");
}

function App() {
  const [showIntro, updateShowIntro] = React.useState(null);

  React.useEffect(() => {
    getScreen()
      .then(result => {
        updateShowIntro(result);
      });
      .catch(/* handle errors appropriately */);

    // alternatively, just call `AsyncStorage.getItem("showIntro")` here
    // AsyncStorage.getItem("showIntro")
    //   .then(result => { updateShowIntro(result); })
    //   .catch(/* handle errors appropriately */);
  }, []);

  const onDone = () => {
     // should `updateShowIntro` be inside `then`?
     AsyncStorage.setItem('showIntro', false)
       .then(() => {
         updateShowIntro(false);
       })
       .catch(/* handle errors appropriately */);
  }

  return showIntro ? (
    <AppIntroSlider
      renderItem={renderItem}
      data={data}
      onDone={onDone}
    />
  ) : (
    <ShowApp />
  );
 }

Ссылки:

...