Question

我正在创建一个可以制作汉堡包的应用程序。唯一的问题是当我按时，例如：添加色拉，它将仅将一次添加具有className Salad的div。我不能两次添加沙拉。

我试图向div添加一个键，以使div有所不同，但是key元素只会增加一个，而不会给我更多的键。

import React, { Component } from 'react';
import '../Hamburger/Hamburger.css';

class Hamburger extends Component {

    componentDidUpdate() {
        this.render();
    }

    renderSwitch(aantal, type) {

        if (aantal === 0) {
            return null;
        }

        let ingredient = null;

        switch (type) {
            case ("salad"):
                ingredient = <div className="Salad">rr</div>;
                break;
            case ("bacon"):
                ingredient = <div className="Bacon">rr</div>;
                break;
            case ("cheese"):
                ingredient = <div className="Cheese">rr</div>;
                break;
            case ("meat"):
                ingredient = <div className="Meat">rr</div>;
                break;
            default:
                return null;
        }

        return ingredient;

    }



    render() {
        return (
            <div style={style}>
                <div style={{ color: "transparent" }}>f</div>
                <div className="BreadTop">r</div>

这是指原始状态，请参见下面的状态

{this.props.artikelen.map(ctrl => (
                    this.renderSwitch(ctrl.aantal, ctrl.type)
                ))}


                <div className="BreadBottom">r</div>

            </div>
        )
    }
}

export default Hamburger



{* THIS.PROPS.ARTIKELEN = *}

state = {
        artikelen: [
            { naam: 'Salad', type: 'salad', aantal: 0 },
            { naam: 'Bacon', type: 'bacon', aantal: 0 },
            { naam: 'Cheese', type: 'cheese', aantal: 0 },
            { naam: 'Meat', type: 'meat', aantal: 0 },
        ]
    }

我希望（点击两次添加沙拉）：

<div className="Salad"></div>
<div className="Salad"></div>

但这只会给我：

<div className="Salad"></div>

Answer 1

您需要在render函数上动态返回元素数组。
我认为您也可以从componentDidUpdate中删除这部分代码，因为在调用组件时，渲染函数将自动触发。

this.render();

将您的renderSwitch函数更改为以下内容：

renderSwitch() {
    let ingredient = [];

    this.props.artikelen.forEach(function(ctrl) {

        if (ctrl.aantal === 0) {
            continue;
        }

        switch (ctrl.type) {
            case ("salad"):
                ingredient.push(<div className="Salad">rr</div>);
                break;
            case ("bacon"):
                ingredient.push(<div className="Bacon">rr</div>);
                break;
            case ("cheese"):
                ingredient.push(<div className="Cheese">rr</div>);
                break;
            case ("meat"):
                ingredient.push(<div className="Meat">rr</div>);
                break;
            default:
            ;
       }
    });


    return (<div>
        {ingredient}
    </div>);

}

然后更改此代码：

{this.props.artikelen.map(ctrl => (
                this.renderSwitch(ctrl.aantal, ctrl.type)
            ))}


            <div className="BreadBottom">r</div>

        </div>
    )
}

对于这样的事情：

            {this.renderSwitch()}
            <div className="BreadBottom">r</div>

        </div>
    )
}

为什么我的开关盒只退回一次？

1 个答案: