Reactjs 按钮单击“不在React上渲染输入字段”

我有一个按钮，应该添加文本框的形式。但是，单击按钮不会显示任何类型的文本字段。我只是把代码的功能所必需的

this.state = {
   zoneName: "",
   zonedesc: [{zoneName:""}]
}
<Tab.Pane>
   <button style= {addzone} disabled={this.state.disable}
           type="button"
           onClick={this.handleAddZoneInput}
           className="small">
               Add Zone
           </button>
</Tab.Pane>

handleAddZoneInput = () => {            
  this.setState({
      zonedesc: this.state.zonedesc.concat([{ zoneName: "" }])
  });
  console.log(this.state.zonedesc)
  this.zoneTextBox();
}
zoneTextBox = () =>{
      return this.state.zonedesc.map((zone,idx)=>(
        <div className="zoneInput">
            <PtInputConditionTab style = {{width:'80%'}} disabled={this.state.disable} 
             placeholder={`Zone Description`}
            value={zone.zoneName} onChange={this.handleZoneNameChange(idx)}/>
           
        </div>
   ))
  }

this.state={
zoneName:“，
zonedesc:[{zoneName:”“}]
}
添加区域
HandleadZoneInput=（）=>{
这是我的国家({
zonedesc:this.state.zonedesc.concat（[{zoneName:”“}]）
});
console.log（this.state.zonedesc）
这个.zoneTextBox（）；
}
zoneTextBox=（）=>{
返回此.state.zonedesc.map（（zone，idx）=>(
))
}

函数

handledzoneInput

中的

console.log

语句显示

state

的

zonedesc

值随着我不断单击按钮而不断增加，但没有显示函数

zoneTextBox

中提到的文本框。

---

如果我只是将

{This.zoneTextBox（）}

放在

按钮

标记的下面，它将在初始页面加载时显示一个文本框，并在单击按钮时不断添加，则效果非常好。但我还需要在按钮单击上添加第一个文本框。

将

分区SC

初始化为空数组

[]

，并将

{this.zoneTextBox（）}

放在按钮标记下方，必须这样做，因为只有这样，输入字段才会添加到DOM中。

您可以直接在DOM中调用

zoneTextBox

函数，而不是在那里调用它。

zoneTextBox

正在返回值，但它正在返回到

handledzoneinput

函数中

---

签出此代码沙盒：

您的

在哪里？我没有。哦。您说过，当单击constructor中的where is this

时，文本框将添加到“form”中？？第二，您必须在返回值的按钮点击时设置state，以

呈现

。是的，这很有效，感谢代码的指导。我完全没有注意到我没有将数组初始化为空