从JSON获取初始值并添加其他值

时间:2019-03-08 22:49:29

标签: javascript reactjs

我正在扫一扫JSON并获取小吃的价值。

{
 "lanches": [
        {   
            "id": 1,
            "name": "X-Bacon",
            "ingredients": [
                "Bacon",
                "Hambúrguer",
                "Queijo"
            ],
            "initialValue: 9.00
        }
    ]
    }

我需要在系统启动时显示它..到目前为止还可以。

我还有其他项目列表,这是另一个JSON扫过了。

{
"ingredientes": [
        {
            "id": 1,
            "name": "Alface",
            "price": 0.40
        },
        {
            "id": 2,
            "name": "Bacon",
            "price": 2.00
        },
        {
            "id": 3,
            "name": "Hambúrguer de carne",
            "price": 3.00
        },
        {
            "id": 4,
            "name": "Ovo",
            "price": 4.00
        },
        {
            "id": 5,
            "name": "Queijo",
            "price": 5.00
        }
    ]
}

添加每个项目时,您需要添加初始值。我只能添加添加的项目。我无法添加第一个值并将其添加到项目中。

在这里我扫一下JSON来拿走小吃

{this.state.lanches.map(lanche => (
    <div className="item" key={lanche.id}>
        <div className="item__desc--top">
            <h2 className="item__title">{lanche.name}</h2>
            <p className="item__price">{this.state.totalPrice}</p>
        </div>
        <ul className="item__ingredientes">
            {lanche.ingredients.map(ingredientes =>
                <li className="item__ingredientes--itens" key={ingredientes}>
                <span>{ingredientes}</span>
                { this.state.editItem ? <button className="actionRemove"><i className="fa fa-times"></i></button> : null}
                </li>
            )}
        </ul>
            <p className="itens__adicionais">Add Items</p>
            <ul className="itens__adicionais--menu">
                {this.state.ingredientes.map(ingrediente =>
                    <li className="itens__adicionais--item" key={ingrediente.id}>
                    <span>{ingrediente.name}</span>
                    <button className="actionAdd" onClick={((e) => this.handleAdd(e, ingrediente.price, lanche.price))}><i className="fa fa-plus"></i></button>
                    </li>
                )}
            </ul>
    </div>
))}

这是求和值的功能:

handleAdd = (e, value_ingrediente) => {
    this.setState(
        {
            totalPrice: this.state.totalPrice + value_ingrediente
        }
    )
  }

0 个答案:

没有答案