推送反应状态数组答案

【问题标题】：Pushing To React State Array推送反应状态数组
【发布时间】：2019-02-11 21:05:49
【问题描述】：

我怎样才能写得更好，我想用 setState 而不是 this.state.floors.push 来做，因为我知道这是不好的做法，但我想不通。我正在使用本机反应。

FloorAPI.getFloorsByBuildingID(this.state.buildingID).then((response) => response.d.data.map((value) => {
  console.log(value.floorName)
  this.state.floors.push({value: value.floorName})
}))

【问题讨论】：

Correct way to push into state array的可能重复

标签： javascript arrays reactjs react-native

【解决方案1】：

// Create a new array based on current state:
let floors = [...this.state.floors];

// Add item to it
floors.push({ value: floorName });

// Set state
this.setState({ floors });

【讨论】：

简单又好用，谢谢。虽然这三个时期是什么，但为什么需要呢？
对我来说有点奇怪，但... 是“解构”概念的一部分：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
最有意义的编码。

【解决方案2】：

目前，最好和最简单的方法是

  this.setState(previousState => ({
      floors: [...previousState.floors, {"value": value.floorName}]
  }));

【讨论】：

我收到错误 TypeError : 传播不可迭代实例的无效尝试
@RayCoder 你得到TypeError : Invalid attempt to spread non-iterable instance的原因是因为你用来破坏的数据不是一个数组，它不可迭代的原因以及你得到错误的原因。跨度>

【解决方案3】：

你可以使用钩子形式

setState((prevVals) => [...prevVals,newVals])

【讨论】：

【解决方案4】：

FloorAPI.getFloorsByBuildingID(this.state.buildingID).then((response) => { 
  // get current floors
  const { floors } = this.state;

  // get new floors after api request
  const newfloors = response.d.data.map((value) => ({value: value.floorName}))

  // set the new state by combining both arrays
  this.setState({ floors: [...floors, ...newfloors] });
})

【讨论】：

【解决方案5】：

你可以创建一个新变量并推送到该变量，然后在映射完成后设置状态

var tempArray = []

FloorAPI.getFloorsByBuildingID(this.state.buildingID).then((response) => response.d.data.map((value) => {
  tempArray.push({value: value.floorName})
}))

this.setState({floors: tempArray})

【讨论】：

【解决方案6】：

const { floors } = this.state;

// Add item to it
floors.push({ value: 5 });

// Set state
this.setState({ floors });

【讨论】：

【解决方案7】：

你可以使用

this.setState({floors: [{value: value.floorName}]});

为了使用设置状态。

【讨论】：

这在某种程度上是有效的，但它只将一个项目放入数组中，我需要所有楼层都在这个数组中，因为它将填充一个下拉菜单。

【解决方案8】：

您始终可以使用以前的状态。

setState((prevState)=>({
   floors: prevState.floors.push({...})
});

这是避免直接更改状态的好方法。另一种方法是执行以下操作：

var newState=[...this.state.floors];
newState.push({...});

setState(()=>({
  floors: newState
)}

【讨论】：

这是两种解决方案的混合体。在您的第一个解决方案中，您不应该修改prevState.floors，这是push 所做的，并且在您的第二个解决方案中，如果您正在生成一个不使用的对象，则不需要将回调传递给setState回调的 state 参数。
谢谢！现在没有，我不允许修改 prevState。现在，当你指出它时，我可以看到它的原因。