Question

174

TypeError: func.apply is not a function

rated 0 times [ 179] [ 5] / answers: 1 / hits: 46938 / 4 Years ago, tue, august 25, 2020, 12:00:00

I'm trying to use useEffect function like that:

    const [data, setData] = useState({ courses: [] });

    

    useEffect(async () => {

        const result = await axios.get(

            "http://example.com/api/v1/categories/"

        );

    

        await setData(result.data);

    }, []);

    

    console.log(data);



return (

    <div>

        <div>{data.info1}</div>

        <div>{data.info2}</div>

        <div>{data.info3}</div>

        <div>{data.info4}</div>

    </div>

);

But when I try to use data variable it sometimes throws this error:

TypeError: func.apply is not a function

HTMLUnknownElement.callCallback

C:/asdasd/node_modules/react-dom/cjs/react-dom.development.js:188

  185 |     window.event = windowEvent;

  186 |   }

  187 | 

> 188 |   func.apply(context, funcArgs);

      | ^  189 |   didError = false;

  190 | } // Create a global error event handler. We use this to capture the value

  191 | // that was thrown. It's possible that this error handler will fire more

I don't know, where do I miss.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

markusdamienn

Add To Favorites

Follow

Total Points: 167

Total Questions: 119

Total Answers: 93

Location: Oman

Member since Wed, Apr 12, 2023

1 Year ago

answered 4 Years ago dequant · Accepted Answer

You can only pass a normal function as argument to useEffect, and not an async function. In order to use async await in useEffect, you can write your function as an IIFE (Immediately Invoked Function Expression - you write the function and call it immediately).

const [data, setData] = useState({ courses: [] });

    

useEffect(() => {

    (async () => {

        const result = await axios.get(

            "http://example.com/api/v1/categories/"

        );

        setData(result.data);

    })();

}, []);

    

console.log(data);



return (

    <div>

        <div>{data.info1}</div>

        <div>{data.info2}</div>

        <div>{data.info3}</div>

        <div>{data.info4}</div>

    </div>

);

Or you can just create a normal named async function and then call it as below,

const [data, setData] = useState({ courses: [] });

    

useEffect(() => {

    const getResult = async () => {

        const result = await axios.get(

            "http://example.com/api/v1/categories/"

        );

        setData(result.data);

    };



    getResult();

}, []);



.

.

.