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

sp92 发表于 Dev

sp92

我正在尝试以一种不需要 3 种不同方法（或者无论我决定将来包含多少方法）来安全地将用户选择的食物类型存储在数据库中的方式来优化我的代码，只要用户单击适当的按钮。

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

旁注：就用户选择而言，当点击所需的食物类型时，模态工作正常。我希望我的代码在将来以某种方式进行优化，如果用户决定不再需要该特定食物，我可以添加删除功能（但我可以稍后处理）。

（我是一个有反应的菜鸟，请原谅我 =D）

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

这是我的代码：

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

无名SL

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

你在你的状态中声明常量。这是不好的做法，没有理由这样做。状态应该包括变化的动态变量。您不应该在其中包含诸如食物名称之类的常量。
您的代码不DRY（d on't [R EPEAT Ÿ我们自己）。您应该找到泛化代码的方法。例如，如果您的三个方法执行相同的操作但使用不同的食物，您可以将要执行操作的食物作为变量传递，并使用一个方法执行相同的操作。

以下是您的代码如何应用这些原则（为了方便起见，我没有包含您的所有代码）：

//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

请注意代码中的注释，因为它们解释了我的行为，并将帮助您理解我所做的事情背后的基本原理。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。