全局变量在 const function React 中未定义

Question

When I try to get current value of a variable outside a const function in React then it would not an issue, while getting access to a variable INSIDE a const function it gives me an error.

 const revealMatchedWord = (string, guessed) => { if(string.length > 0) { const regExpr = new RegExp(`[^${guessed.join("")}\\s]`, 'ig'); return string.replace(regExpr, '_'); } else { return; } } let curr = revealMatchedWord(guessWord, updatedArray); let isGuessed = curr === guessWord; // check if word is guessed console.log('isGuessed ' + isGuessed); // true const checkLetters = () => { console.log('isGuessed ' + isGuessed); // undefined } const handleKeyPress = useCallback(event => { let letter = String.fromCharCode(event.keyCode).toLowerCase(); if(event.keyCode >= 65 && event.keyCode <= 90) { checkLetters(); } else if(event.keyCode == 13) { event.preventDefault(); return; } else { return; } }); useEffect(() => { document.addEventListener('keydown', handleKeyPress); return () => { document.removeEventListener('keydown', handleKeyPress); } }, [handleKeyPress]); return ( <div> <p>{revealMatchedWord(guessWord, updatedArray)}</p> </div> )

In vanilla this.isGuessed should be working properly but in React this is not the case.

Answer 1

 useEffect(() => { checkLetters(isGuessed); }, [isGuessed]);

Answer 2

It's because of yout useCallback you need to pass a second parameter for the "cache" version to update.

    const handleKeyPress = useCallback(event => {
        // logic here
    }, [isGuessed]);

Pass the is guessed so handleKeyPress will re update the resulting value if isGuessed change.