Реагировать на собственный asyncStorage с помощью рендеринга useEffect

Я пытаюсь получить элемент из локального хранилища, но он не отображается правильно, поэтому мне следует обновить приложение, внося любые изменения в код, и сохранять его каждый раз, когда я вхожу в систему или выхожу из системы. Вот мой код.

Реагировать на собственный asyncStorage с помощью рендеринга useEffect

    useEffect(() => {
    const _getUserhData = async () => {
        try {
            let userInfo = await AsyncStorage.getItem('userData');
            if (userInfo) {
                const parsedUserData = JSON.parse(userInfo);
                setUserData(parsedUserData);
                console.info(userData, 'userData');

            }
        } catch (error) {
            console.error('Error retrieving data:', error);
        }
    };

    _getUserhData();
},  [userInfo]);

🤔 А знаете ли вы, что...
React поддерживает однонаправленный поток данных (unidirectional data flow) для предсказуемого управления состоянием.


98
3

Ответы:

Решено

Из того, чем вы поделились, нет userInfo заявленного объема, например. область действия тела компонента функции React.

Насколько я могу судить о вашем коде, вам следует просто удалить userInfo и использовать пустой массив зависимостей, поскольку в обратном вызове useEffect перехватчика нет внешних зависимостей.

const [userData, setUserData] = React.useState(null);

useEffect(() => {
  const getUserData = async () => {
    try {
      const userInfo = await AsyncStorage.getItem('userData');
      setUserData(JSON.parse(userInfo));
    } catch (error) {
      console.error('Error retrieving data:', error);
    }
  };

  getUserData();
},  []);

Используйте это, когда пользователь открывает экран

useEffect(() => {

    const subscribe = navigation.addListener('focus', () => {
       // your user data code
    })

    return () => {
        subscribe;
    }
}, [])

const navigation = useNavigation()

useEffect(() => {
    AsyncStorage.getItem('userData').then((response) => {
        if (response) {
            const parsedUserData = JSON.parse(response);
            setUserData(parsedUserData);
            console.info(response, 'userData');

        }
    })
},  []);