在 React 中使用 useEffect API 调用时出错

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

Answer 1

useEffect should not be async

Do it like this:

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

Answer 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]);