如何在ReactJs中使用擴展運算符將新值添加到數組的末尾

Question

我已經將狀態初始化為：

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

因此，當前正在發生的事情是，地圖功能無法正常工作。 我的意思是該塊兩次返回相同的值。 當我添加一個新值時，它會附加到以前的狀態。 因此，如果我的圖像再次添加新值，它將在mnpq之后附加。我想要的是一個接一個地添加新值。如何為這種情況設置新狀態？

Answer 1

您正在使用map來迭代buildings數組中的元素。 回調函數中的第一個參數是當前元素，因此將其從復數buildings更改為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>
  );   
}

Answer 2

map function的第一個參數是對循環中的數組map的當前元素的引用。

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