Dans mon code de réaction, à l'intérieur d'un composant, je récupère une valeur du stockage de session (à l'intérieur du hook useEffect). Lorsque la console est imprimée, elle affiche la valeur. Mais à l'intérieur du rendu (ou de la méthode de retour), il n'a pas la valeur qui vient d'être récupérée. Y a-t-il un délai lors de la récupération depuis le stockage de session?
Contournement du problème après avoir stocké le même état et récupéré à l'intérieur du rendu!
let myValue = '';
useEffect(()=>{
myValue = sessionStorage.getItem("someKey");
},[]);
// In the return method
return {
<div>{myValue}</div>
}
Pourquoi la valeur récupérée depuis le stockage de session n'est pas disponible immédiatement en rendu?
4 Réponses :
Non, les appels localStorage et sessionStorage sont synchronisés
Vous ne voyez pas la valeur dans le rendu car la vue n'est pas restituée. Vous devez définir un état, obtenir de nouveaux accessoires ou forcer le rendu pour le voir.
Comment forcer la mise à jour dans les hooks
const [, updateState] = React.useState();
const forceUpdate = useCallback(() => updateState({}), []);
p >
Il est disponible immédiatement
return {
<div>{sessionStorage.getItem("someKey")}</div>
}
Non, tous les appels sessionStorage sont synchrones .
Le problème ici est que vous vous attendez à ce qu'un changement de valeur de variable déclenche un nouveau rendu. React ne fonctionne pas de cette façon et vous aurez besoin d'une autre approche si vous souhaitez modifier une valeur et la faire restituer:
Considérez:
const [myValue, setMyValue] = useState('');
useEffect(()=>{
setMyValue(sessionStorage.getItem("someKey"));
},[]);
// In the return method
return {
<div>{myValue}</div>
}
La définition d'une variable privée à partir de 'useEffect' ne va pas provoquer un nouveau rendu. Vous pouvez envisager d'utiliser
useStateafin de disposer d'un mécanisme pour définir la valeur et enregistrer un nouveau rendu.Oui! C'est ainsi que j'avais contourné le problème.