Question

到目前为止，在单击4种食物类型中的任何一种时，它们都将毫无问题地出现在模式中。

问题出在这里：

每当我第一次单击任何按钮时，都会显示0。每当我再次单击任何按钮（除了我之前单击的按钮之外）时，都会显示1。

每当我再次单击任何按钮（除了我之前单击的按钮之外），都将显示2。每当我再次单击任何按钮时（除了我之前单击的按钮之外），都会出现3。

我想显示一个按钮被单独单击的次数。例如，如果我单击Chicken Taco 4次，然后单击Beef Taco 2次，则2和4应该出现在模式中。

这是我的代码：

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 {
    constructor(props) {
        super(props);

        this.state = {
            selectedItems: [],

            foodClicks: {
                cTacoClicked: 0,
                bTacoClicked: 0,
                cBurritoClicked: 0,
                bBurritoClicked: 0,
            }

        };

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

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

    selectFood(food) {
        this.setState(state => {
            let selected = state.selectedItems;
            let cTaco = state.foodClicks.cTacoClicked;
            let bTaco = state.foodClicks.bTacoClicked;
            let cBurrito = state.foodClicks.cBurritoClicked;
            let bBurrito = state.foodClicks.bBurritoClicked;

            if(!selected.includes(food)) {
                selected.push(food);
            }

            return {
                selectedItems: selected,
                cTacoClicked: cTaco + 1,
                bTacoClicked: bTaco + 1,
                cBurritoClicked: cBurrito + 1,
                bBurritoClicked: bBurrito + 1
            };
        });
    }

    render() {
        return (
            <Aux>
                {Object.keys(this.items).map(key => (
                    <FoodButton clicked={() => this.selectFood(key)} key={key} label={this.items[key]}/>
                ))}

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

                <Modal isOpen={this.props.isOpen}>

                    {this.state.selectedItems.map(key => (
                        <div key={key}>
                            <p key={key}>{this.items[key]}</p>
                        </div>
                    ))}

                    {Object.keys(this.state.selectedItems.map(key => (
                        <div key={key}>
                            <p key={key}>{this.state.foodClicks[key]}</p><br/>
                        </div>
                    )))}

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

Answer 1

cTacoClicked: cTaco + 1,
bTacoClicked: bTaco + 1,
cBurritoClicked: cBurrito + 1,
bBurritoClicked: bBurrito + 1

当前，您要向所有食品点击计数器加1。相反，您应该只增加所选食物的计数器。

在constructor()中，使用项目键作为点击计数器键可以简化操作。初始化状态如下：

    this.state = {
        selectedItems: [],

        foodClicks: {
            chickenTaco: 0,
            beefTaco: 0,
            chickenBurrito: 0,
            beefBurrito: 0,
        }
    };

这是selectFood()的实现：

selectFood(food) {
    this.setState(state => {
        let selected = state.selectedItems;

        if(!selected.includes(food)) {
            selected.push(food);
        }

        return {
            selectedItems: selected,
            foodClicks: {
                ...state.foodClicks,
                [food]: state.foodClicks[food] + 1
            }
        };
    });
}

如何分别显示状态的每个项目的点击次数？

1 个答案: