Liaison de données bidirectionnelle imbriquée Etat du formulaire à localStorage dans React

Question

Je crée un générateur de formulaire pour permettre aux utilisateurs de créer des questions. Chaque question peut avoir un nombre infini de sous-questions et je veux enregistrer les données dans localStorage. Quelle serait la meilleure approche pour mettre à jour dynamiquement localStorage en fonction de l'état de chaque question/sous-question dans le formulaire puisque localStorage stocke JSON? Existe-t-il un moyen de prendre le principe de flux de données unidirectionnel Reacts et de faire fonctionner son état en parallèle avec le stockage local?

Answer 1

Je pense que vous pouvez définir une variable d'état dans votre composant de formulaire au niveau du conteneur et appeler localStorage.set ('MY_QUESTIONS', questionsObj) chaque fois qu'une mise à jour est effectuée pour que l'objet localStorage soit synchronisé avec l'état variable.

Par exemple, vous pouvez l'appeler dans le rappel de chaque changement d'état:

handleQuestionsUpdate() { 
    this.setState({ 
     formQuestions: newQuestions 
    },() => { 
     localStorage.setItem('MY_QUESTIONS', this.state.formQuestions) 
    }); 
}