反应 useState() 问题

Question

I have a problem with using function component. I'm writing Hangman game and i stuck while trying to do staff about letters discovering. Here is my code.

App.js

import CreateSubject from './components/CreateSubject'
import Hangman from './components/Hangman'
import { HangmanProvider } from './context/HangmanContext'

function App() {
  return (
    <HangmanProvider>
      <div className="App">
        <CreateSubject/>
        <Hangman/>
      </div>
    </HangmanProvider>
  );
}

export default App;

CreateSubject.js

import {HangmanContext } from '../context/HangmanContext'

function CreateSubject(props){
    
    const {password,displayGame,displayForm} = useContext(HangmanContext)
    const [subject,setSubject] = password
    const [gameDisplay,setGameDisplay] = displayGame
    const [createSubjectDisplay,setCreateSubjectDisplay] = displayForm
    
    const handleSubmit = (e) =>{
        e.preventDefault()
        if(subject != ''){
            setCreateSubjectDisplay('none')
            setGameDisplay('')
        }
    }
    const handleChange = (e) =>{
        setSubject(e.target.value)
        e.target.value = subject
    }
    return(
        <form style={{display: createSubjectDisplay}} onSubmit={handleSubmit}>
            <label>
                <div>Enter a Word:</div>
                <input type='text'
                 value={subject}
                 onChange={handleChange}
                 className='createSubject'
                 maxLength='40'/>
            </label>
            <button type='submit'>Create</button>
        </form>
    )
}

export default CreateSubject

Hangman.js

import al from '../alphabet'
import {HangmanContext} from '../context/HangmanContext'

const Hangman = (props) =>{
    const {password,displayGame,displayForm} = useContext(HangmanContext)

    const [subject,setSubject] = password
    const [gameDisplay,setGameDisplay] = displayGame
    const [createSubjectDisplay,setCreateSubjectDisplay] = displayForm
    
    let passwordArr = Array.from(subject)
    const [hiddenPassword,changeHiddenPassword] = useState()

    useEffect(() => {
        let passwordArr = Array.from(subject)
        changeHiddenPassword(passwordArr.map(item => '_')) 
    },[]);

    const chooseLetter = (e) => {
        let letter = e.target.innerHTML
        passwordArr.forEach((e,i) => {
            if (e == letter){
              console.log(hiddenPassword)
            }
        })
    }

    const letters = al.map((letter) =>
        <span onClick={chooseLetter}>{letter}</span>
    )

    return(
        <div style={{display:gameDisplay}}>
            <div className='password'>
                {
                //passwordArr.map((item,i) => <span>{hiddenPasswordArr[i]}</span>)
                }
            </div>
            <div className='wrapper'>
                <div className='pass_input'>Enter password:<input type='text' maxLength='30'/></div>
                <div className='alphabet'> {letters} </div>
            </div>
        </div>
    )
}

export default Hangman

My problem is in Hangman.js when i'm trying to change 'hiddenPassword' state which is an array. When i'm outputing this state in console it shows me an empty array. What have i done wrong?

Answer 1

You need to initialize your hiddenPassword state:

const [hiddenPassword,changeHiddenPassword] = useState(passwordArr.map(item => '_'))

Answer 2

subject might have to be in the useEffect 's dependency array

    useEffect(() => {
        let passwordArr = Array.from(subject)
        changeHiddenPassword(passwordArr.map(item => '_')) 
    },[subject]);