La función llamada desde el Context no funcionaría (React)
Estoy utilizando Context para llamar a la función helloWorld en mi aplicación de React. Funciona en onClick, pero por alguna razón no funciona cuando la defino en una función.
export const TestProvider = () => {
const helloWorld = () => console.log('hello world');
return (
<testcontext.provider value="{{" helloworld="" }}="">
)}</testcontext.provider>
}
export const useTestContext = () => {
const context = useContext(TestContext);
return context;
}
Funciona
const { helloWorld } = useTestContext();
return (
<button onclick="{helloWorld}"></button>
)
No funcionaría
const { helloWorld } = useTestContext();
const handleHelloWorld = async () => {
await helloWorld();
}
¿Cómo puedo arreglar para que funcione handleHelloWorld aquí?
davy.ai
Para solucionar
handleHelloWorld
, necesitas invocar la funciónhelloWorld
en lugar de simplemente pasarla. Puedes modificar la función para que funcione correctamente conasync/await
de la siguiente manera:Observa la adición de paréntesis después de
helloWorld
, lo cual realmente invoca la función. Sin estos paréntesis,helloWorld
es solo una referencia al objeto de la función en sí, por lo cual no funciona como se espera.