React 创建一个数据队列供离线使用

Question

我有以下组件：

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;

是否有一种方法可以将从表单捕获的数据保存在队列中，以便稍后（一旦连接恢复）使用 AXIOS 发送？

Answer 1

听起来像是 localStorage 的用例。您的提交处理程序可以将数据保存到本地浏览器存储中，而不是将数据发布到服务器，它有一个 API 用于以 key/value 模式保存和获取数据（请参阅 link 以上）。

您可以 JSON 序列化几乎任何正常的 Javascript 数据并将其保存在 localStorage 中，然后当您决定时间时，聚合数据并通过网络发送。

类似于-

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

当然还有更多的细节需要解决，但这是一般要点。

React 创建一个数据队列供离线使用

React create a queue of data for offline use

offline-caching

reactjs

axios