陣營創建對象的數組隊列發送一次連接可用

Question

我有以下JSX代碼：

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; 

我想一些數據保存到本地存儲和建立某種形式的排隊系統，所以一旦連接回來，我可以用AXIOS提交這些數據。

Inside 「的submitForm（五）」：

• ，如果它是第一次（否則內部）我填充的localStorage與第一目標（singleCandidate）

• 否則我將嘗試將數據存入一個數組並將其與基於localstorage內現有值的新數組組合。

不過，我得到一個數組裏的數組：

的目的是，如果沒有連接，用戶更新的形式，每種形式提交了Array獲取用數據填充並存儲在本地存儲中。

如何爲在一個單一的對象的每個表單提交存儲數據和更新的陣列被按下以localStorage的和被檢索一旦連接恢復？

Answer 1

有一個小的私人聊天后，我張貼的更新實現submitForm方法，對亞歷克斯作品：

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