How to get value from async function in react-native?

Question

function CategoryCard (props) {

    const [done, setDone] = React.useState(null);
    let check;

    React.useEffect(() => {
        async function checkData() {
            check = await getData(props.path);
            // prints CORRECTLY
            console.log(check);
        }
        checkData();
    //prints INCORRECTLY
        console.log(check);
        setDone(true);
    }, []);

    return (

        <View>
        {done ? (
            <Text>{check}</Text>
        ):(
            <View style={[styles.container, styles.horizontal]}>
                <ActivityIndicator size="large" color="#99ff99" />
            </View>
        )}
        </View>
    );
}

How can I get a value from an async function into my regular function in react-native? In the above code, the first console.log prints the expected values, but the second one gives undefined, as if the async function never had any effect on the variable check. I need the value of check from getData(props.path) in order to display it in the <Text> component.

Any ideas?

put your data in state and update the state.

Prateek Thapa
– Prateek Thapa

2020-08-27 04:15:51 +00:00
Commented Aug 27, 2020 at 4:15 — Prateek Thapa
– Prateek Thapa, Commented Aug 27, 2020 at 4:15

Prateek Thapa · Accepted Answer · 2020-08-27 04:17:38Z

7

Put it in the state.

function CategoryCard (props) {

    const [check, setCheck] = React.useState(null);

    React.useEffect(() => {
        async function checkData() {
            const data = await getData(props.path);
            setCheck(data);
        }
        checkData();

    }, []);

    return (

        <View>
        {check ? (
            <Text>{check}</Text>
        ):(
            <View style={[styles.container, styles.horizontal]}>
                <ActivityIndicator size="large" color="#99ff99" />
            </View>
        )}
        </View>
    );
}

answered Aug 27, 2020 at 4:17

Prateek Thapa

4,9481 gold badge12 silver badges25 bronze badges

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

Comments

Eugene Ihnatsyeu · Accepted Answer · 2024-04-07 09:13:13Z

0

Small suggestion: additionaly you can create your own hook for computing this in the different file and using it everywhere. Something like

const check = useCheck();

export function useCheck() {
    const [check, setCheck] = useState(null);

    useEffect(() => {
        (async () => {
            const data = await getData(props.path);
            setCheck(data);
        })();
    }, []);

    return check;
}

answered Apr 7, 2024 at 9:13

Eugene Ihnatsyeu

1,63517 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to get value from async function 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