Error when using useEffect API call in React

Question

I am calling this api inside a context provider:

const url = 'http://127.0.0.1:8000/api/posts/'

const PostListContextProvider = (props) => {
    const [posts, setPosts] = useState([])

    useEffect(async () => {
        const {data} = await axios.get(url);
        setPosts(data)
    }, [posts]);

    return (
        <PostListContext.Provider value={ posts }>
            { props.children }
        </PostListContext.Provider>
    );
}

Upon consuming the context using useContext, this error occurs:

react-dom.development.js:19710 Uncaught TypeError: destroy is not a function

What am I doing wrong?

ps.even though I am getting the error, I am still successfully fetching the data

Does this answer your question? Getting error after i put Async function in useEffect — wentjun
– wentjun, Commented Jun 5, 2020 at 15:39

Łukasz Karczewski · Accepted Answer · 2020-06-05 15:37:17Z

3

useEffect should not be async

Do it like this:

useEffect(() => {
        (async () => {
          const {data} = await axios.get(url);
          setPosts(data)
        })()
}, [posts]);

answered Jun 5, 2020 at 15:37

Łukasz Karczewski

1,20811 silver badges14 bronze badges

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

1 Comment

Jacob Over a year ago

The reason why you can't use an async function is because that makes the function return a Promise, and useEffect requires that if you return something it should be a function, which it can use to clean up the effect.

Shubham Khatri · Accepted Answer · 2020-06-05 15:39:40Z

2

useEffect is supposed to return a function if it returns something, since you are defining the callback function to useEffect as a promise, what it essentially returns is a promise which is not what it expects.

In order to use a async function within useEffect you would write it like

useEffect(() => {

   async function myFn() {
        const {data} = await axios.get(url);
        setPosts(data)
   }
   myFn();
}, [posts]);

answered Jun 5, 2020 at 15:39

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

3 Comments

iscream Over a year ago

I am still getting the error. Its actually a warning, and it shows that react still assumes I use the previous method

Shubham Khatri Over a year ago

I didn't get you. What is the warning exactly

iscream Over a year ago

my bad. I forgot to save. Thanks!

Collectives™ on Stack Overflow

Error when using useEffect API call in React

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related