Discussion :

[haddocks]

Bonjour,

J'ai créé un petit éditeur de liste. Je voudrais utiliser le localStorage pour que ma liste réapparaissent après rafraichissement de la page.
Le probleme est que le storage apparait quand je clic le bouton envoyer.
https://stackblitz.com/edit/react-lh...src%2Findex.js

Comment faire ça ?

[mathieu]

quand vous récupérer les données dans "localstorage", vous devez utiliser "this.setState" pour que l'affichage soit mis à jour avec ces nouvelles données.

[haddocks]

là je vois pas du tout. This.setState c'est pour mettre a jour le state. Moi je veux seulement afficher ce qu'il y a dans storage...
vous pouvez modifier mon code ?

[mathieu]

regardez le lien suivant, j'ai modifié le code dans "componentDidMount" :
https://stackblitz.com/edit/react-rr...e=src%2FApp.js

[haddocks]

Super, mai il faut que je comprenne:

1- J'ai un tableau vide 'datas',

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let datas = [];

, don je me sert pour stocker les entrées.

2- Quand je clic sur le bouton "envoyer", handleSubmit concate le tableau vide avec la nouvelle entrée.
3- Au fur et à mesure, je stocke l'état du tableau du début (1) dans le storage avec componentDidUpdate.
4- Lorsque je rafraichi la page, componentDidMount récupére l'état du storage dans storageData qui est reversé dans le tableau vide 'datas' du début (1).

A partir de là, le tableau est envoyé au composant 'AddImo' en ligne 97:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

        <ListImo datas={datas} />

5- Puisque je fais un rafraichissement, render() entre en action et rend 'AddImo' avec les données du tableau qui était vide au début.

Je comprends pas à quel moment intervient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.setState(datas);

Je vois bien que le tableau 'datas' est ajouté au state, mais en ligne 97, on envoit le tableau 'datas' du début par les props et pas le datas sauvegardé dans le state, sinon en ligne 97, il faudrait écrire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

datas={this.state.datas}

Pouvez vous m'expliquer où est mon l'erreur de raisonnement ?

J'ai hâte de comprendre