Обновление визуализированных данных компонента после изменения переменной asyn c React Native

Question

Я новичок в React Native и пытаюсь отобразить StackScreen на основе значения переменной. Переменная заполняется async и должна измениться с something на null, которая вместо этого должна показывать WelcomeStack вместо HomeStack. Проблема в том, что React ничего не делает после изменения переменной из функции async.

Код:

// State.js
export const _getWelcomeComplete = async () => {
  let value;
  try {
    await AsyncStorage.getItem('welcomeComplete').then(
      (response) => (value = response),
    );
  } catch (error) {
    // Error retrieving data
    console.log(error.message);
  }
  return value;
};

// App.js
export default function App() {
  let welcomed = 'something';
  _getWelcomeComplete().then((response) => {
    welcomed = response;
  });

  return (
    <NavigationContainer>
      <WelcomeHeader />
      <Stack.Navigator>
        {welcomed === null ? (
          <Stack.Screen
            name="WelcomeStack"
            component={WelcomeStack}
            options={{headerShown: false}}
          />
        ) : (
          <Stack.Screen
            name="HomeStack"
            component={HomeStack}
            options={{headerShown: false}}
          />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Answer 1

В вашем коде 2 проблемы. Во-первых, вы не используете никакое состояние, что означает, что React не будет заботиться о ваших изменениях и не будет перерисовывать компонент. Чтобы решить эту проблему, используйте хук useState для хранения переменной.

Вторая, менее значительная проблема заключается в том, что вы вызываете функцию _getWelcomeComplete непосредственно в теле компонента, поэтому она будет вызывать при каждом повторном отображении. , создавая бесконечное l oop. Чтобы решить эту проблему, поместите вызов в useEffect, который выполняет его только при изменении чего-либо в массиве во втором аргументе (в этом случае массив пуст, поэтому он вызывается только при монтировании компонента)

Вот измененный код:

Приложение. js

export default function App() {
  const [welcomed, setWelcomed] = useState('something');

  useEffect(() => {
    _getWelcomeComplete().then((response) => {
      setWelcomed(response);
    });
  }, [])

  return (
    <NavigationContainer>
      <WelcomeHeader />
      <Stack.Navigator>
        {welcomed === null ? (
          <Stack.Screen
            name="WelcomeStack"
            component={WelcomeStack}
            options={{headerShown: false}}
          />
        ) : (
          <Stack.Screen
            name="HomeStack"
            component={HomeStack}
            options={{headerShown: false}}
          />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Понимание хуков очень важно в React, поэтому вот ссылка на официальные документы: Представляем крючки