Estoy tratando de usar la función useEffect así:
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> );
Pero cuando trato de usar la variable de data
, a veces arroja este 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
No sé, donde echo de menos.
Eliminar la palabra clave de retorno que está escrita en useEffect resuelva mi problema
puede escribir una función asíncrona por separado y luego llamarla desde adentro
Esto indica que está devolviendo un valor de useEffect que no es una función. Mirando el código que compartió, está usando muchas funciones asíncronas con useEffect, que no es compatible y provocará este error.
¿Puede proporcionar más código, para que pueda entender lo que está tratando de hacer?
Solo puede pasar una función normal como argumento para useEffect y no una función asíncrona. Para usar async await en useEffect, puede escribir su función como una IIFE (Expresión de función invocada inmediatamente: escribe la función y la llama inmediatamente).
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> );
O simplemente puede crear una función asíncrona con nombre normal y luego llamarla como se muestra a continuación,
const [data, setData] = useState({ courses: [] }); useEffect(() => { const getResult = async () => { const result = await axios.get( "http://example.com/api/v1/categories/" ); setData(result.data); }; getResult(); }, []); . . .
No use async await, {} y [] en useEffect. resuelve por mi
useEffect(() => { props.actions.something(); }, [])
si tienes uso
useEffect(async () => await props.actions.something(); )