Почему мой выключатель возвращается только один раз?

Question

Я создаю приложение, где вы можете сделать гамбургер.Единственная проблема, когда я нажимаю, например: Добавить салат, он добавит div с className Salad только один раз.Я не могу добавить салат дважды.

Я пытался добавить ключ к div, чтобы div отличался, но ключевой элемент увеличится только на один, и это не даст мне больше. 's.

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 },
        ]
    }

Я ожидаю (2 клика, чтобы добавить салат):

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

Ноэто только даст мне:

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

Answer 1

Вам необходимо динамически возвращать массив элементов в функции рендеринга.
Я думаю, что вы также можете удалить эту часть кода из 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>
    )
}