Reactjs 如何在for循环内部创建新div并在React中显示结果

我在做一个汉堡项目

单击添加按钮时，应添加配料。单击移除按钮时，应移除成分

我现在遇到的问题是，当点击按钮时，什么都没有发生

以下是如何设置状态：

    constructor(props) {
        super(props)
    
        this.state = {
             lettuce: 0,
             tomato: 0,
             cheese: 0,
             meat: 0
        }
    }

按钮：

 let ingredients = ['lettuce', 'tomato', 'cheese', 'meat']
{
                        ingredients.map((ingredient, index) => {
                            return(
                            <div key={index}>
                                <p>{ingredient}</p>
                                <div className="ingredientButtons">
                                <button onClick={()=>this.addRemoveIngredient('add', ingredient)} className="ingrBtn">Add</button>
                                <button onClick={()=>this.addRemoveIngredient('remove', ingredient)} className="ingrBtn">Remove</button>
                                </div>
                            </div>
                            )
                        })
                    }

在渲染函数中显示成分

                <div className="burgerIngredients"> 
                    <div className="topSide"></div> 
                        {this.burger()}
                    <div className="bottomSide"></div> 
                </div>
}

{this.burger（）}
}

我不知道为什么什么都没有出现。

---

谢谢您的时间。

我已经尝试复制该功能，但看起来对我来说还不错。你能在这里更新出了什么问题吗。同时检查控制台的更新是否正确： 代码：

从“React”导入React；
导入“/style.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
生菜：0，
番茄：0，
奶酪：0，
肉类：0
}
}
AddRemoveIncident=（动作、成分）=>{
让stateValue=this.state[成分]；
操作=='add'？stateValue=stateValue+1:stateValue=stateValue-1
这是我的国家({
[成分]：stateValue>=0？stateValue:0
},() => {
console.log（this.state）
})
}
showComponent=（成分）=>{
让汉堡=[]
for（设i=0；i{
让配料=[‘生菜’、‘西红柿’、‘奶酪’、‘肉’]
返回成分。映射（（成分，索引）=>{
返回(
{
这个。展示配料（配料）
}
)
})
}
renderButton=（）=>{
让配料=[‘生菜’、‘西红柿’、‘奶酪’、‘肉’]
返回成分。映射（（成分，索引）=>{
返回(
{成分}

this.addremoveingredit（'add'，component）}className=“ingrBtn”>add
this.addremoveingredit（'remove'，component）}className=“ingrBtn”>remove
)
})
}
render（）{
报税表（
{this.burger（）}
{this.renderButton（）}
)
}
}
导出默认应用程序；

---

演示：

你能检查一下里面的

addremoveingdent

吗。您的

[配料]

值是否已更新？还可以显示你如何定义你的状态？@ShubhamVerma我已经用构造函数更新了这个问题。我还注意到AddRemoveCredit中也有一些奇怪的东西。添加了我的答案。我觉得很好。请注意，我没有添加css，但希望您了解上下文。让我知道，如果你在某个地方卡住了，为什么在burger函数中有两个返回？因为我在

render

函数中使用。因此，

burger

函数不返回任何内容。正如在

JSX

中一样，我们需要显示

Array of elements

return确保我们是从

burger

函数返回JSX elements数组谢谢！伟大的如果这能解决你的问题。将答案标记为已接受。如果有人遇到相同类型的问题，则会弹出此问题（stackoverflow算法），并最终帮助他们

    showIngredient = (ingredient) => {
        let burger = []
        for(let i = 0; i < this.state[ingredient]; i++){
            burger.push(<div key = {i} className={ingredient}></div>)
        }

        return burger
    }

    burger = () => {
        let ingredients = ['lettuce', 'tomato', 'cheese', 'meat']

        ingredients.map((ingredient, index) => {
            return (
                <div key ={index}>
                    {
                        this.showIngredient(ingredient)
                    }
                </div>
            )
        })

.lettuce{
    background-image: url("../assets/lettuse.jpg");
    background-size: 300px;
    height: 27px;
    width: 100%;
    display: table;
    background-repeat: no-repeat;
    background-position: center;

                <div className="burgerIngredients"> 
                    <div className="topSide"></div> 
                        {this.burger()}
                    <div className="bottomSide"></div> 
                </div>
}

import React from "react";
import "./style.css";

class App extends React.Component{

  constructor(props) {
        super(props)
    
        this.state = {
             lettuce: 0,
             tomato: 0,
             cheese: 0,
             meat: 0
        }
    }

    addRemoveIngredient = (action, ingredient) => {
        let stateValue = this.state[ingredient];

        action === 'add' ? stateValue = stateValue + 1 : stateValue = stateValue - 1 

        this.setState({
            [ingredient]: stateValue >= 0 ? stateValue : 0
        },() => {
          console.log(this.state)
        })
    }

  showIngredient = (ingredient) => {
      let burger = []
      for(let i = 0; i < this.state[ingredient]; i++){
          burger.push(<div key = {i} className={ingredient}>{this.state[ingredient]}</div>)
      }

      return burger
  }

  burger = () => {
      let ingredients = ['lettuce', 'tomato', 'cheese', 'meat']

      return ingredients.map((ingredient, index) => {
          return (
              <div key ={index}>
                  {
                      this.showIngredient(ingredient)
                  }
              </div>
          )
      })
  }

  renderButton = () => {
     let ingredients = ['lettuce', 'tomato', 'cheese', 'meat']

        return ingredients.map((ingredient, index) => {
            return(
            <div key={index}>
                <p>{ingredient}</p>
                <div className="ingredientButtons">
                <button onClick={()=>this.addRemoveIngredient('add', ingredient)} className="ingrBtn">Add</button>
                <button onClick={()=>this.addRemoveIngredient('remove', ingredient)} className="ingrBtn">Remove</button>
                </div>
            </div>
            )
        })
                    
  }
  

  
  render(){
    return(<div className="burgerIngredients"> 
                    <div className="topSide"></div> 
                        {this.burger()}
                    <div className="bottomSide"></div>
                    {this.renderButton()} 
                </div>)
  }
}

export default App;