pass token using useEffect and AsyncStorage in React Native

Question

I start to use React Native, and should use AsyncStorage instead of LocalStorage

But I can't deal with async in useEffect and AsyncStorage, because token sets after fetch send everything. Help me please with that

const [tkn, setTkn] = useState('')

const getData = async () => {
    try {
        const value = await AsyncStorage.getItem('token')
        if(value !== null) {
            setTkn(value)
        }
    } catch(e) {
        
    }
}

useEffect(() => {
    AsyncStorage.getItem('token').then((value) => {
        if (value) {
            setTkn(value)
        }
    });


    fetch('http://127.0.0.1:8000/home', {
        method: "GET",
        headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            'Token': tkn
        }
    })
        .then(function (response) {
            if (response.status >= 200 && response.status <= 299) {
                return response.json();
            } else {

            }
        })
        .then(funds => {
            ///
        }).catch(function (error) {
            
        })
}, [history])

Kai · Accepted Answer · 2021-04-28 17:34:46Z

1

I would recommend creating two effects: one to fetch the token from storage, and one to make the API call.

The first effect will fire when the component mounts (pass a [] as the useEffect dependencies) and the second will fire when the token changes (pass [tkn] to that useEffect, and check to make sure that the token has a non-empty value).

This way, you won't have to worry about chaining all of your async logic together.

answered Apr 28, 2021 at 17:34

Kai

2,5991 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dmitriy Mozgovoy · Accepted Answer · 2021-04-28 18:20:04Z

1

useEffect(() => {
    (async()=>{
      const token = await AsyncStorage.getItem('token');
      setTkn(token);
      const response= await fetch('http://127.0.0.1:8000/home', {
        method: "GET",
        headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            'Token': token
        }
      });
      if (response.status >= 200 && response.status <= 299) {
         const json= await response.json();
         //...
      }
    })();
}, [])

answered Apr 28, 2021 at 18:20

Dmitriy Mozgovoy

1,6072 gold badges11 silver badges10 bronze badges

Collectives™ on Stack Overflow

pass token using useEffect and AsyncStorage in React Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related