Javascript 我如何以只需要一种方法的方式优化代码（如果可能的话）？

我正试图以一种不需要3种不同方法（或我决定在将来包括多少种方法）的方式优化我的代码，以便在用户单击相应按钮时，安全地将用户选择的食物类型存储在数据库中

我尝试了许多不同的方法，但我的代码不断崩溃，最终我只是在追逐自己的尾巴。我觉得优化效率很低，因为每种食物类型都不同，这意味着我们需要不同的方法在数据库中存储不同的食物

旁注：在点击所需的食物类型时，用户选择会一个接一个地出现，该模式可以很好地工作。我希望我的代码能够得到优化，在将来，如果用户决定不再需要特定的食物，我可以添加一个删除功能（但我可以稍后处理）

（我是个反应迟钝的人，请原谅我）

那么，有没有可能让我的代码比现在更干净呢

这是我的密码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Modal from 'react-modal';

import Aux from '../../../../hoc/Aux';
import FoodButton from '../FoodButtons/FoodButton';
import CheckoutButton from '../CheckoutButton/CheckoutButton';
import axios from '../../../../axios-foodChosen';

import { CLOSE_MODAL, OPEN_MODAL } from "../../../../store/action/NoNameAction";

class TacoTypes extends Component {
    state = {
        items: {
            cTacoClicked: false,
            cTaco: '',

            bTacoClicked: false,
            bTaco: '',

            cBurritoSelected: false,
            cBurrito: ''
        }
    }

    componentWillMount() {
        // for modal
        Modal.setAppElement('body');
    }

    chickenTaco() {
        // modal
        const cTacoSelected = "Chicken Taco";
        this.setState({cTacClicked: true, cTaco: cTacoSelected});

        // firebase
        let name = "Chicken Taco";
        axios.post('./chosen.json', { name })
            .then(response => {
                console.log("chicken taco check firebase");
            }).catch(error => {
            console.log(error);
        })
    }

    beefTaco() {
        // modal
        const bTacoSelected = "Beef Taco";
        this.setState({bTacoClicked: true, bTaco: bTacoSelected});

        // firebase
        let name = "Beef Taco";
        axios.post('./chosen.json', { name })
            .then(response => {
                console.log("beef taco check firebase");
            }).catch(error => {
            console.log(error);
        })

    }

    chickenBurrito() {
        // modal
        const cBurritoSelected = "Chicken Burrito";
        this.setState({cBurritoSelected: true, cBurrito: cBurritoSelected });

        // firebase
        let name = "Chicken Burrito";
        axios.post('./chosen.json', { name })
            .then(response => {
                console.log("chicken burrito check firebase");
            }).catch(error => {
            console.log(error);
        })

    }

    render() {
        return (
            <Aux>
                <FoodButton clicked={() => this.chickenTaco()} label={"Chicken Taco"}/>
                <FoodButton clicked={() => this.beefTaco()} label={"Beef Taco"}/>
                <FoodButton clicked={() => this.chickenBurrito()} label={"Chicken Burrito"}/>

                <CheckoutButton clicked={() => this.props.openModalRedux()}/>

                <Modal isOpen={this.props.isOpen}>
                    <p>
                        {Object.keys(this.state.items).map(key => (
                            <p key={key}>{this.state[key]}</p>
                        ))}
                    </p>
                    <button onClick={() => this.props.closeModalRedux()}>Close</button>
                </Modal>
            </Aux>
        );
    }
}

const mapStateToProps = state => {
    return {
        // props for modal
        isOpen: state.global.isModalOpen,
    }
};

const mapDispatchToProps = dispatch => {
    return {
        // Modal handlers
        openModalRedux: () => dispatch({type: OPEN_MODAL}),
        closeModalRedux: () => dispatch({type: CLOSE_MODAL})
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(TacoTypes);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“反应模态”导入模态；
从“../../../../hoc/Aux”导入辅助对象；
从“../FoodButtons/FoodButton”导入FoodButton；
从“../CHECKBURTON/CHECKBURTON”导入CHECKBURTON；
从“../../../../axios foodChosen”导入axios；
从“../../../../store/action/NoNameAction”导入{CLOSE\u model，OPEN\u model}”；
类TacoTypes扩展组件{
状态={
项目：{
点击：错误，
cTaco:“，
B:错误，
bTaco:“”，
cBurritoSelected:false，
cBurrito:'
}
}
组件willmount（）{
//对于模态
Modal.setAppElement（“主体”）；
}
奇肯塔科（）{
//模态
const cTacoSelected=“鸡肉塔可”；
this.setState（{cTacClicked:true，cTaco:cTacoSelected}）；
//火基
让name=“鸡肉塔可”；
post（'./selected.json'，{name}）
。然后（响应=>{
控制台日志（“鸡肉塔可检查火基”）；
}).catch（错误=>{
console.log（错误）；
})
}
beefTaco（）{
//模态
const bTacoSelected=“牛肉塔可”；
this.setState（{btacoclicated:true，bTaco:bTacoSelected}）；
//火基
让name=“牛肉塔可”；
post（'./selected.json'，{name}）
。然后（响应=>{
控制台日志（“牛肉塔可检查火基”）；
}).catch（错误=>{
console.log（错误）；
})
}
chickenBurrito（）{
//模态
const cBurritoSelected=“鸡肉煎饼”；
this.setState（{cBurritoSelected:true，cBurrito:cBurritoSelected}）；
//火基
让name=“鸡肉煎饼”；
post（'./selected.json'，{name}）
。然后（响应=>{
控制台日志（“鸡肉煎饼检查火炉”）；
}).catch（错误=>{
console.log（错误）；
})
}
render（）{
返回(
this.chickenTaco（）}label={“Chicken Taco”}/>
this.beefTaco（）}标签={“牛肉塔可”}/>
this.chickenBurrito（）}label={“鸡肉煎饼”}/>
this.props.openModalRedux（）}/>

{Object.keys（this.state.items）.map（key=>(
{this.state[key]}
))}

this.props.closeModalRedux（）}>Close
);
}
}
常量mapStateToProps=状态=>{
返回{
//模态分析的道具
isOpen:state.global.isModalOpen，
}
};
const mapDispatchToProps=调度=>{
返回{
//模态处理程序
openModalRedux:（）=>调度（{type:OPEN_MODAL}），
closeModalRedux:（）=>分派（{type:CLOSE_MODAL}）
}
};
导出默认连接（MapStateTrops、mapDispatchToProps）（TacoTypes）；

我将其缩小到以下主要问题：

• 您正在状态中声明常量。这是坏习惯，没有理由这样做。状态应该包括变化的动态变量。你不应该在其中包含食物名称之类的常量
• 你的代码不是（D在我们自己身上）。您应该找到概括代码的方法。例如，如果您的三个方法执行相同的操作，但处理的食物不同，您可以将要执行操作的食物作为变量传递，并使用一个方法执行相同的操作

下面是应用这些原则时您的代码的外观（我没有包括所有舒适的代码）：

//导入，诸如此类
类TacoTypes扩展组件{
建造师（道具）{
//通常的做法是在构造函数中声明您的状态。
此.state={
selectedItems:[]，
};
//常量项名称
此项。项目={
chickenTaco：“鸡肉塔可”，
beefTaco：“牛肉塔可”，
鸡煎饼：“鸡煎饼”，
};
}
组件willmount（）{
//对于模态
Modal.setAppElement（“主体”）；
}
选择食物（食物）{
this.setState（state=>{
//动态设置状态以避免竞争条件
let selected=state.selectedItems；
如果选择了（！selected.includes（food）），则推送（food）；
返回{selectedItems:selected}；
});
//在这里用firebase做任何事。。。
//您可以使用此项获取名称。项目[食物]
}
render（）{
返回(
{Object.keys（this.items）.map（key=>(
//保持代码干燥，我们动态创建食物按钮。
//R
//Imports, blah blah blah
class TacoTypes extends Component {
    constructor(props) {
        //It's common practice to declare your state in the constructor.

        this.state = {
            selectedItems: [],
        };

        //Constant item names
        this.items = {
            chickenTaco: 'Chicken Taco',
            beefTaco: 'Beef Taco',
            chickenBurrito: 'Chicken Burrito',
        };
    }

    componentWillMount() {
        // for modal
        Modal.setAppElement('body');
    }
    selectFood(food) {
        this.setState(state => {
            //Dynamically setting state to avoid race conditions
            let selected = state.selectedItems;
            if(!selected.includes(food)) selected.push(food);
            return {selectedItems: selected};
        });

        //Do whatever with firebase here...
        //You can get the name using this.items[food]
    }

    render() {
        return (
            <Aux>
                {Object.keys(this.items).map(key => (
                    //Keeping our code DRY, we dynamically create the food buttons.
                    //React will throw a warning if we don't supply a unique key prop when dynamically creating variables using loops.
                    <FoodButton key={key} clicked={() => this.selectFood(key)} label={this.items[key]} />
                ))}

                <CheckoutButton clicked={() => this.props.openModalRedux()}/>

                <Modal isOpen={this.props.isOpen}>
                    <p>
                        {
                            //According to your comments I assume you want to display the items
                            //selected only, unlike what you originally coded:
                            this.state.selectedItems.map(key => (
                                <p key={key}>{this.items[key]}</p>
                            ))
                        ))}
                    </p>
                    <button onClick={() => this.props.closeModalRedux()}>Close</button>
                </Modal>
            </Aux>
        );
    }
}
//Include the rest of your code here