在一个状态中保存不同的状态值

Question

我通过增强状态值在一个页面中做了3个组成部分。我通过使用数组来保持对不同页面的跟踪。我试图将每个页面的button的值保存为一个新状态，但是我希望一次将所有状态值以单个状态保存到我的数据库中。我没有怎么做。这是我的代码：

import axios from "axios";
import React from "react";

class Pages extends React.Component {
    state = {
        apiUrl: config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl,
        currentPage: "property",
        pages: ["property", "type", "firstBusiness"],
        start: true,
        end: false
    };


    //page navigation

    changePage = event => {
        const { currentPage, pages } = this.state;
        const { name } = event.target;
        //check if we are going to end
        if (
            name == "next" &&
            pages[pages.indexOf(currentPage) + 1] === pages[pages.length - 1]
        ) {
            this.setState({
                currentPage: pages[pages.indexOf(currentPage) + 1],
                end: true,
                start: false
            });
            //go to next page
        } else if (name == "next") {
            this.setState({
                currentPage: pages[pages.indexOf(currentPage) + 1],
                start: false
            });
            //check if we are going to beginning
        } else if (
            name == "back" &&
            currentPage !== pages[0] &&
            pages[pages.indexOf(currentPage) - 1] == pages[0]
        ) {
            this.setState({
                currentPage: pages[pages.indexOf(currentPage) - 1],
                start: true
            });
            //go back one page
        } else {
            this.setState({
                currentPage: pages[pages.indexOf(currentPage) - 1],
                end: false
            });
        }
    };

    goToNextPage = () => {
        const { currentPage, pages, end } = this.state;
        //check if we are going to end
        if (pages[pages.indexOf(currentPage) + 1] === pages[pages.length - 1]) {
            this.setState({
                currentPage: pages[pages.indexOf(currentPage) + 1],
                end: true,
                start: false
            });
            //go to next page
        } else if (end) {
            return;
        } else {
            this.setState({
                currentPage: pages[pages.indexOf(currentPage) + 1],
                start: false
            });
        }
    };
    ////page navigation ends 


    //saving in a state

    saveValue = (e) => {
        console.log('savecategory', e.target.innerHTML);

        this.setState({
            category: e.target.innerHTML
        }, this.makingAxiosRequest);

    };

    makingAxiosRequest = () => {
        axios.post( this.state.apiUrl+'/api/v1/LeadSurvey/save', {
            'categoryName':this.state.category,
        }, {})
    };
    savedValue = (e) => {
        // console.log('savecategory', e.target.innerHTML);

        this.setState({
            subCategory: e.target.innerHTML
        }, this.makeAxiosRequest);

    };

    makeAxiosRequest = () => {
        axios.post( this.state.apiUrl+'/api/v1/LeadSurvey/save', {
            'subCategoryName':this.state.subCategory,
        }, {})
    };
    //saving in a state ends

    render() {
        const { currentPage, start, end } = this.state;
        return (
            <div style={{ background: "gray" }}>
                {currentPage === "property" ? (
                    <div>
                        <p>What is the type of your property?</p>
                        <button   onClick={(e)=>{this.saveValue(e),this.goToLastPage()}} >Residence</button>
                        <button   onClick={(e)=>{this.saveValue(e),this.goToLastPage()}} >Commercial</button>
                    </div>
                ) : null}

                {currentPage === "type" ? (
                    <div>
                        <p>What is the type of your commercial property?</p>
                        <button   onClick={(e)=>{this.savedValue(e),this.goToNextPage()}} >Office</button>
                        <button   onClick={(e)=>{this.savedValue(e),this.goToNextPage()}} >Restaurant</button>
                        <button   onClick={(e)=>{this.savedValue(e),this.goToNextPage()}} >Outlet</button>

                    </div>
                ) : null}

                {currentPage === "firstBusiness" ? (
                    <div>
                        <p>Is this your first business?</p>
                        <button onClick={this.goToNextPage}>Yes</button>
                        <button onClick={this.goToNextPage}>No</button>
                    </div>
                ) : null}

                <div>
                    <button onClick={this.changePage} name="back" disabled={start}>
                        Back
                    </button>
                    <button onClick={this.changePage} name="next" disabled={end}>
                        Next
                    </button>
                </div>
            </div>
        );
    }
}

export default Pages;

this.savedValue，this.saveValue 是这两个函数，分别在2种不同的状态下保存2种不同的按钮值。我希望这样保存我的数据。

"data": {
    "categoryName": "residence",
    "createdBy": null,
    "createdDate": "2019-07-10T23:07:49.012452+00:00",
    "id": "",
    "subCategoryName": "commercial "
  },

但是它是一个单一的元素。我该怎么做？这是用于可视化的codeandbox链接： https://codesandbox.io/s/questionarie-31jmc