1
votes

TypeError: func.apply n'est pas une fonction

J'essaye d'utiliser la fonction useEffect comme ça:

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

Mais lorsque j'essaie d'utiliser data variable de data , cela génère parfois cette erreur:

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

Je ne sais pas, où me manque-t-il.

javascript reactjs axios use-effect

2 commentaires

veuillez poster votre code qui a cette ligne func.apply(context, funcArgs);

Les effets sont censés renvoyer une fonction de nettoyage ou rien du tout. Voir la documentation Votre async function renvoie une promesse. Donc, returnedPromise.apply(...) échouera évidemment.

4 Réponses :

0
votes

vous pouvez écrire une fonction asynchrone séparément puis l'appeler de l'intérieur

1 commentaires

fonction asynchrone myFunc (données) {} useEffect (() => {myFunc (données);}, [données]);

2
votes

Cela indique que vous renvoyez une valeur de useEffect qui n'est pas une fonction. En regardant le code que vous avez partagé, vous utilisez beaucoup les fonctions asynchrones avec useEffect, ce qui n'est pas pris en charge et déclenchera cette erreur.

Pouvez-vous fournir plus de code, alors puis-je comprendre ce que vous essayez de faire!

0 commentaires

3
votes

Vous ne pouvez passer qu'une fonction normale comme argument à useEffect , et non une fonction asynchrone. Afin d'utiliser async await dans useEffect, vous pouvez écrire votre fonction comme un IIFE (expression de fonction immédiatement appelée - vous écrivez la fonction et l'appelez immédiatement).

const [data, setData] = useState({ courses: [] });
    
useEffect(() => {
    const getResult = async () => {
        const result = await axios.get(
            "http://example.com/api/v1/categories/"
        );
        setData(result.data);
    };

    getResult();
}, []);

.
.
.

Ou vous pouvez simplement créer une fonction asynchrone nommée normale, puis l'appeler comme ci-dessous,

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

1 commentaires

Ohh, je suis désolé. Votre première méthode fonctionne bien. Merci

0
votes

Veuillez ne pas utiliser async await, {} et [] dans useEffect. résoudre pour moi

useEffect(async () => 
  await props.actions.something();
)

si vous avez utilisé

useEffect(() => {
    props.actions.something();
}, [])

0 commentaires