React créer une file d'attente de données pour une utilisation hors ligne

Question

Je le composant follwoing:

import React, { Component } from 'react'; 

import axios from 'axios'; 

class Form extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      firstName: '', 
      email: '', 
      university: '', 
      degree: '' 
     } 

     this.setFirstName = this.setFirstName.bind(this); 
     this.setEmail = this.setEmail.bind(this); 
     this.setUniversity = this.setUniversity.bind(this); 
     this.setDegree = this.setDegree.bind(this); 
    } 

    setFirstName(name) { 
     this.setState({ 
      firstName: name 
     }); 
    } 

    setEmail(email) { 
     this.setState({ 
      email: email 
     }); 
    } 

    setUniversity(university) { 
     this.setState({ 
      university: university 
     }); 
    } 

    setDegree(degree) { 
     this.setState({ 
      degree: degree 
     }); 
    } 

    getSingleInputValue(e) { 

     if(e.target.getAttribute('name') == 'name'){ 
      this.setFirstName(e.target.value); 
     } 

     if(e.target.getAttribute('name') == 'email'){ 
      this.setEmail(e.target.value); 
     } 

     if(e.target.getAttribute('name') == 'university'){ 
      this.setUniversity(e.target.value); 
     } 

     if(e.target.getAttribute('name') == 'degree'){ 
      this.setDegree(e.target.value); 
     } 

    } 

    submitForm(e) { 
     var token = document.getElementsByTagName("meta")[0].getAttribute("content"); 

     e.preventDefault(); 

     axios({ 
      url: '/save-data', 
      method: 'POST', 
      contentType: 'application/json', 
      data: { 
       "candidates": [ 
        { 
         "name": this.state.firstName, 
         "email": this.state.email, 
         "university": this.state.university, 
         "degree": this.state.degree 
        } 
       ] 
      }, 

      headers: { 
       'Content-Type': 'application/json', 
       'X-CSRF-TOKEN': token 
      } 

     }).then(function(response) { 
      console.log(response); 

      // go to next screen 
     }) 
    } 

    render() { 
     let isVisible = this.props.visibility ? "" : "hide-form"; 

     return(
      <form className={"form " + isVisible}> 
       <input 
        placeholder="John Green" 
        type="text" 
        name="name" 
        onChange={this.getSingleInputValue.bind(this)} /> 

       <input 
        placeholder="Email" 
        type="text" 
        name="email" 
        onChange={this.getSingleInputValue.bind(this)} /> 

       <input 
        placeholder="University" 
        type="text" 
        name="university" 
        onChange={this.getSingleInputValue.bind(this)} /> 

       <input 
        placeholder="Degree" 
        type="text" 
        name="degree" 
        onChange={this.getSingleInputValue.bind(this)} /> 

       <button onClick={this.submitForm.bind(this)}>enter</button> 
      </form> 
     ); 
    } 
} 

export default Form; 

est-il un moyen de sauvegarder les données dans une file d'attente capturé de la forme pour être plus tard (une fois la connexion est de retour dans) envoyé avec AXIOS?

Answer 1

Cela ressemble à un cas d'utilisation pour localStorage. Votre gestionnaire de soumission, au lieu de publier les données sur le serveur, peut à la place l'enregistrer dans le stockage du navigateur local, qui dispose d'une API pour enregistrer et extraire les données dans un modèle clé/valeur (voir le lien ci-dessus). Vous pouvez JSON sérialiser à peu près toutes les données Javascript normales et les enregistrer dans localStorage, et puis quand vous décidez qu'il est temps, agréger les données et l'envoyer sur le fil.

Quelque chose comme -

// ... 
submitForm(e) { 
    e.preventDefault(); 

    window.localStorage.setItem("foo", JSON.stringify({ 
    name: this.state.firstName, 
    email: this.state.email, 
    university: this.state.university, 
    degree: this.state.degree 
    }); 
} 

Bien sûr, il y aura plus de détails à régler que cela, mais ce serait le sens général.