阵营创建对象的数组队列发送一次连接可用

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