Tengo una función llamada setScore( ) en mi componente de aplicación que se transmite como accesorios a mi componente emergente . Quiero llamar a la función UpdateScore( ) según una condición en mi componente emergente. Sin embargo, también quiero llamar al método setScore( ) basado en una condición, pero me da el error mencionado anteriormente.
const Popup = ({user,correctLetters,wrongLetters,setPlayable,selectedWord, playAgain, currentQuestion, words, score, setScore, quitGame}) => { function UpdateScore() { if(!check){ check = true; setScore(score => (score + 1)); } }; if ((checkWin(correctLetters,wrongLetters,selectedWord) === 'win') && (currentQuestion < words.length -1)){ UpdateScore(); } else if((checkWin(correctLetters,wrongLetters,selectedWord) === 'win') && (currentQuestion === words.length -1 )){ UpdateScore(); } Este no es el código completo, pero el problema principal es la llamada a setState( ) . Miré otras publicaciones y lo resolvieron envolviendo el método setState en un useEffect pero luego me da otro error :
No se puede renderizar useEffects condicionalmente.
¿Alguna idea de cómo puedo resolver esto?
Probablemente las siguientes obras:
const isWin = checkWin(correctLetters, wrongLetters, selectedWord) === 'win' && currentQuestion <= words.length && !check; React.useEffect(() => { if (isWin) { check = true; setScore((score) => score + 1); } }, [isWin, setScore]); Veo un problema con el check y tengo la sensación de que debería estar en un useRef.
El problema es que está llamando a UpdateScore (que llama a setScore ) en el cuerpo del componente y no es así como funciona React. Si desea ejecutar if...else if en Popup first render, use un gancho useEffect de esta manera:
useEffect(() => { if ((checkWin(correctLetters,wrongLetters,selectedWord) === 'win') && (currentQuestion < words.length -1)){ UpdateScore(); } else if((checkWin(correctLetters,wrongLetters,selectedWord) === 'win') && (currentQuestion === words.length -1 )){ UpdateScore(); } }, [correctLetters, wrongLetters, selectedWord, currentQuestion, UpdateScore]); En realidad, este useEffect se activará cada vez que una de correctLetters, wrongLetters, selectedWord, currentQuestion, UpdateScore cambie su valor (pero los necesita como dependencias; de lo contrario, recibirá una advertencia sobre "dependencias faltantes").