Javascript 如何在ReactJs中使用spread运算符向数组末尾添加新值

我已将状态初始化为：

this.state = {
    buildingNames: []
}

然后，我将向函数内的数组添加新值，如下所示：

onClickAddBuildingTextBoxHandler = (inputData) => {
    this.setState({ buildingNames: [...this.state.buildingNames, inputData.value] });   
}

因此，在我的渲染函数中，我将数组的值渲染为：

this.state.buildingNames.map((buildings, i) => {
    return (
        <div key={'building' + i}>
            <div className={classes.sceBuildingNameContainer}>
                <div className={classes.sceBenchmarkingBuildingName}>
                    {this.state.buildingNames} //its returning a single element
                </div>
                <button
                   className={classes.sceCloseIcon}
                   onClick={this.onClickDeleteBuildingIconHandler}>
                       <i className={"fas fa-times " + classes.sceBuildingCloseIcon} />
               </button>
            </div>
        </div>
}

this.state.buildingNames.map（（建筑物，i）=>{
返回(
{this.state.buildingNames}//返回单个元素
}

因此，当前发生的情况是，map函数工作不正常。我的意思是块返回相同的值两次。当我添加一个新值时，它会附加到以前的状态。因此，如果我的图像，如果我再次添加一个新值，它将附加在mnpq之后。我想要的是在其他。如何设置该案例的新状态

---

映射函数的第一个参数是对循环的数组映射的当前元素的引用

onClickAddBuildingTextBoxHandler = (inputData) => {
    const tempState = [...this.state.buildingNames];
    tempState.push(inputData.value);
    this.setState({ buildingNames: tempState });

  }



this.state.buildingNames.map((building, i) => {
    return (
        <div key={'building' + i}>
            <div className={classes.sceBuildingNameContainer}>
                <div className={classes.sceBenchmarkingBuildingName}>
                    {building} //Here you are refrencing the current element.
                </div>
                <button
                   className={classes.sceCloseIcon}
                   onClick={this.onClickDeleteBuildingIconHandler}>
                       <i className={"fas fa-times " + classes.sceBuildingCloseIcon} />
               </button>
            </div>
        </div>
}

onClickAddBuildingTextBoxHandler=（inputData）=>{
const tempState=[…this.state.buildingNames]；
tempState.push（inputData.value）；
this.setState（{buildingNames:tempState}）；
}
this.state.buildingNames.map（（building，i）=>{
返回(
{building}//这里您正在重新引用当前元素。
}

您正在使用

映射

迭代

建筑物

数组中的元素。回调函数中的第一个参数是当前元素，因此将其从复数

建筑物

更改为

建筑物

，然后在JSX

{building}中引用该元素

。此外，无需在密钥id前加上“building”前缀

this.state.buildingNames.map((building, i) => {
  return (
    <div key={i}>
      <div className={classes.sceBuildingNameContainer}>
        <div className={classes.sceBenchmarkingBuildingName}>
          {building}
        </div>
      </div>
    </div>
  );   
}

this.state.buildingNames.map（（building，i）=>{
返回(
{建筑}
);   
}

您想保留旧的建筑名称并添加新的建筑名称，还是想删除并替换为新的建筑名称？@kev我想要两个，我想要新的建筑名称添加到数组中。这就像添加新建筑一样。因此，当我添加时，它将显示在UI中前一个建筑名称的下方。然后请查看我的答案。如suming inputData.value是一个buildingNames或一组buildingNames对象，它应该可以工作。@kev，我尝试了你在回答中提到的方法，但它仍然给我带来同样的问题。它被附加到上一个值的末尾。它没有为新名称返回新块，而是被添加到上一个名称的末尾。我明白了，它是问题在您的return（）语句中。请稍候…抱歉，但是“this.state.buildingNames是一个数组，因此您应该像这样在映射函数中对其进行索引：this.state.buildingName[i]”不正确。在映射函数中，您应该使用“buildings”访问当前建筑。变量名不正确；-）你有一个名字叫Noch_ein_Kamel。我有一个名字叫antwort。