web-dev-qa-db-fra.com

useState est toujours la valeur par défaut en soi

J'utilise useState pour gérer état, ça marche bien. Mais quand je renvoie l'état à l'intérieur de itseft, il a toujours la valeur de l'initiale

import react, {useState} from 'react'

const MyComponent = () => {
    const [myState, setMyState] = useState({
        value: 'initial value',
        setValue: (newValue) => {
            setMyState({...myState, value: newValue})
            console.log(myState.value) //<--always is 'initial value'
        }
    })

    return(
        <>
            <p>{myState.value}</p> //<-- it's working fine
            <input value={myState.value} onChange={(e) => myState.setValue(e.target.value)} /> //<--working fine too

        </>
    )
}

J'attends le console.log est la valeur de l'entrée, mais la sortie réelle est toujours la valeur initiale

javascriptreactjsreact-hooks
4
mikenlanggio

Une meilleure façon de le faire sera

import react, {useState} from 'react'

const MyComponent = () => {
    const [ value, setValue ] = useState('initial value');
    const handleChange = (e) => {
        setValue(e.target.value);
    }

    return(
        <>
            <p>{myState}</p>
            <input value={myState.value} onChange={handleChange} />
        </>
    )
}
0
kushalvm

Premièrement, la fonction à l'intérieur de l'argument useState n'est pas au courant de la mise à jour car elle n'est appelée qu'une seule fois et a la valeur de sa fermeture. Deuxièmement, la façon dont vous utilisez useState n'est pas correcte, vous devez uniquement avoir la valeur dans useState et avoir les gestionnaires à l'extérieur

Vous devez également utiliser un modèle de rappel

import react, {useState} from 'react'

const MyComponent = () => {
    const [myState, setMyState] = useState('initial value');   
    const setValue = (newValue) => {
         setMyState(newValue)
    }
    console.log(myState);
    return(
        <>
            <p>{myState}</p> 
            <input value={myState} onChange={(e) => setValue(e.target.value)} />

        </>
    )
}

La mise à jour d'état est également asynchrone, de sorte que la mise à jour n'est pas reflétée immédiatement à la place après le rendu suivant.

0
Shubham Khatri