1

En mi juego de preguntas tengo 4 opciones, y si el id de la opción que el usuario clickea, coincide con el id de la respuesta correcta, necesito actualizar la puntuación. Sin embargo, para hacerlo tengo que usar el evento onClick. Pero ahí dentro no puedo usar condicionales porque así es JSX, por lo que hice una función y simplemente es llamada dentro del evento onClick. Este es el código:

const correctAnswer= () => {
   if(correct === index){      /* Esta condición solo checkea si es la opción correcta, no prestar atención*/
      useDispatch(incrementCounter())
   }
}
 ---------------------------------------------------------
return(
   <button onClick={correctAnswer}>example</button>    
)

Sin embargo, este código me da el siguiente error:

React Hook "useDispatch" is called in function "correctAnswer" which is neither a React function component or a custom React Hook function

La única solución que le encuentro es llamar al estado del reducer correspondiente en el componente donde el componente de opción es renderizado, sin embargo, esto le quita sentido al uso de redux ya que lo quiero aplicar para no tener que pasar tantos props por componente.

Desde ya muchas gracias!

1 respuesta 1

1

Para utilizar cualquier hook de react, en este caso el hook "useDispatch" primero debes inicializar el hook dentro del componente de react y no dentro de sus funciones. Puedes probar modificando tu código de la siguiente manera:

const MyComponent = () => {
  const dispatch = useDispatch(); //Nivel correcto para inicializar un hook
  ...
  const correctAnswer = () => {
    // Nivel incorrecto para inicializar un hook
    if (correct === index) {
      /* Esta condición solo checkea si es la opción correcta, no prestar atención*/
      dispatch(incrementCounter());
    }
  };
  ...
};

Te comparto la siguiente liga con mas información: reactjs.org

1
  • 2
    No es el nivel incorrecto para usarlo, es que useDispatch no es una función directa, es un inicializador para el hook. Lo correcto es que sí puede usar el hook dentro de correctAnswer, lo incorrecto es que no puede usar el inicializador como una función común. Tu respuesta está bien, solo que ese comentario podría confundir. Commented el 17 ago. 2020 a las 23:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.