如何在 Reactjs 中的状态对象内将值添加到数组中答案

【问题标题】：How to prepend a value to an array inside the object of state in Reactjs如何在 Reactjs 中的状态对象内将值添加到数组中
【发布时间】：2019-02-23 18:01:52
【问题描述】：

我有一个初始状态：

this.state = {
         transition:{
         completedStages:[]
         }
}

我想要实现的是，在函数调用中，我可以为completedStages 更新我的状态，这样每次更新状态时，值都会预先添加到数组中。喜欢：

this.state = {
         transition:{
         completedStages:[SR, RR, BR]
         }
}

为此，我尝试的是：

let completedStages = [...this.state.transition.completedStages];
    completedStages.unshift('SR');
this.setState({
             transition:{
             completedStages:[completedStages]
             }
})

这弄乱了我的输出，并将每个添加的数组值都成对地作为键。我如何理解这种情况？

【问题讨论】：

附加还是前置？
前置，是的，当然，因为我使用的是unshift，所以我已经更新了这个词
您能否显示您的代码产生的状态并解释它与您想要的有何不同？
Unshift 在这里应该可以正常工作。它被搞砸的原因是completedStages 是一个数组，但是当您设置状态时，您正在通过[completedStages] 将该数组插入到一个新数组中。不要将completedStages 放在一个数组中，因为它已经是一个了。

标签： arrays reactjs setstate

【解决方案1】：

你可以试试：

this.setState((state) => {
   return {
     transition: {
       ...state.transition,
       completedStages: ['SR', ...state.transition.completedStages]
     }
   }
})

【讨论】：

【解决方案2】：

就像这样添加它。也可以使用 setState 的函数方式：

this.setState(prevState => ({
  transition:{
  completedStages:['SR', ...prevState.transition.completedStages]
}})

【讨论】：

但这会将它添加到最后.. 我需要在开始时将其推送，在 biggining 时将每个新值推送到里面
对不起，我错过了。 Prepend 也适用于解构。我编辑了我的答案。
这就像一个魅力......你能帮我理解它......供我将来参考吗？
一些解释：['foo', ...oldArray] 创建一个新的数组实例，而不改变oldArray。 this.setState(function(prevState){return {count: prevState.count +1};}) 是 setState 从旧状态生成新状态的功能方式。内部函数部分的简化 ES6 版本将如下所示：`prevState => ({count: prevState.count + 1})