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.
Remove return keyword which is written in useEffect resolve my issue
you may write an async function separately and then call it from inside
This indicates that you're returning a value from useEffect that isn't a function. Looking at the code that you shared you're using async functions with useEffect a lot, which isn't supported and will trigger this error.
Can you provide more code ,so can I understand what you are trying to do!
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();
}, []);
.
.
.
Please do not use async await, {} and [] in useEffect. solve for me
useEffect(() => {
props.actions.something();
}, [])
if you have use
useEffect(async () =>
await props.actions.something();
)