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

Posted 2023-02-22

【中文标题】如何在 Reactjs 中的状态对象内将值添加到数组中

【英文标题】：How to prepend a value to an array inside the object of state in 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 放在一个数组中，因为它已经是一个了。

【参考方案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)