React créer une file d'attente de tableau d'objets à envoyer une fois la connexion est disponible

Question

je le code JSX suivant:

import React, { Component } from 'react'; 

import axios from 'axios'; 
import serialize from 'form-serialize'; 

var a = [], b= []; 

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

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

     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 
     }); 
    } 

    setCandidates(candidates) { 
     this.setState({ 
      candidates: candiadtes 
     }) 
    } 

    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"); 
     var form = document.querySelector('.form'); 

     e.preventDefault(); 

     var singleCandidate = serialize(form, { hash: true }); 

     if(JSON.parse(localStorage.getItem("candidates"))) { // checks if there is one or more values 
      a.length = 0; 
      a.push(JSON.parse(localStorage.getItem("candidates"))); 

      b.push(singleCandidate); 

      var temp = a.concat(b); 

      // localStorage.setItem("candidates", JSON.stringify(temp)); 
      // console.log(JSON.parse(localStorage.getItem("candidates"))); 
     } 

     else { 
      localStorage.setItem("candidates", JSON.stringify(singleCandidate)); 
      console.log(JSON.parse(localStorage.getItem("candidates"))); 
     } 


    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; 

Je suis en train d'enregistrer des données dans le stockage local et de créer une sorte de système faire la queue, pour que, une fois la connexion rétablie, je puisse soumettre ces données avec AXIOS.

Inside "submitForm (e)":

• si elle est la première fois (à l'intérieur d'autre) Je POPULATE localStorage avec le premier objet (singleCandidate)

• sinon je suis en train de sauvegarde des données en un tableau et en le combinant avec un nouveau tableau basé sur les valeurs existantes dans le localstorage.

Cependant, je reçois un tableau dans un tableau:

L'objectif est que s'il n'y a pas de connexion et l'utilisateur met à jour le formulaire, pour chaque formulaire soumis un tableau obtient peuplé avec les données et stocké dans le localstorage. Comment puis-je, pour chaque soumission de formulaire, stocker des données dans un seul objet et mettre à jour un tableau à pousser vers localstorage et être récupéré une fois la connexion rétablie?

Answer 1

Après avoir une petite conversation privée que je poste une mise en œuvre de la méthode mise à jour submitForm qui fonctionne pour Alex:

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

    var singleCandidate = serialize(form, { hash: true }); 
    var fromStorage = localStorage.getItem("candidates") 

    if (fromStorage) { 
    var parsedFromStorage = JSON.parse(fromStorage) 
    parsedFromStorage.push(singleCandidate) 
    localStorage.setItem("candidates", JSON.stringify(parsedFromStorage)) 
    } else { 
    localStorage.setItem("candidates", JSON.stringify([singleCandidate])); 
    } 
}