获取数据后如何正确调度数据？

Question

if i act onPress={() => kakaoLosing()

i want to get data(which is profile) from getProfile by using async await

and right after dispatch data to KAKAOLOG_IN_REQUEST,

this is my code

            import {
            getProfile as getKakaoProfile,
            } from '@react-native-seoul/kakao-login';


            const Vieww = ({}) => {
            
            const kakaoLosing = useCallback(() => {
                
                const getProfile = async () => {
                const profile = await getKakaoProfile();
                };

                dispatch({
                type:KAKAOLOG_IN_REQUEST,
                data:profile
                })
            },[]);

                return (

                    <Button1 onPress={() => kakaoLosing()} >
                    <Label>
                    profile
                    </Label>
                    </Button1>

but if i use this code

this error occure

        ReferenceError: Can't find variable: profile

how can i fix my code??

Answer 1

You've closed over profile in the getProfile function scope, it isn't available in the useCallback hook callback. You then also don't call getProfile to make the request.

I don't think there's a need for the useCallback hook. Just declare a normal async function and await the response. Now profile is in the same scope as the dispatch .

const Vieww = ({}) => {
  const kakaoLosing = async () => {
    const profile = await getKakaoProfile();

    dispatch({
      type: KAKAOLOG_IN_REQUEST,
      data: profile
    });
  };

  return (
    <Button1 onPress={kakaoLosing} >
      <Label>
        profile
      </Label>
    </Button1>
    ...

Answer 2

You can do it this way if you want it in separate functions:

    const Vieww = ({}) => {
        const profile = async () => {
          const data = await getKakaoProfile();
          return data;
        }

        const kakaoLosng = () => {
          const dataToDispatch = profile();
          
          dispatch({
            type: KAKAOLOG_IN_REQUEST,
            data: dataToDispatch 
            })
        }
        

or even simpler:

        const Vieww = ({}) => {
            const kakaoLosng = async () => {
              const dataToDispatch =  await getKakaoProfile();
              
              dispatch({
                type: KAKAOLOG_IN_REQUEST,
                data: dataToDispatch 
                })
            }

and on button you can just pass:

return (
    <Button1 onPress={kakaoLosing}>