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提交数据。

内部＆＃34; submitForm（e）＆＃34;：

如果是第一次（在其他地方）我用第一个对象填充localstorage（singleCandidate）
否则我正在尝试将数据保存到数组中，并根据localstorage中的现有值将其与新数组合并。

但是，我在数组中得到一个数组：

目标是如果没有连接并且用户更新表单，则对于提交的每个表单，数组将填充数据并存储在localstorage中。

我如何为每个表单提交在单个对象中存储数据并更新数组以将其推送到localstorage并在连接恢复后进行检索？

Answer 1

在进行一些私聊之后，我发布了适用于Alex的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])); 
  } 
}

React创建一个连接可用时要发送的对象的数组队列

1 个答案: