如何清除嵌套状态内的数组？答案

【问题标题】：How to clear array which is inside nested state?如何清除嵌套状态内的数组？
【发布时间】：2019-07-26 05:48:02
【问题描述】：

我有像下面这样的 crated 状态，在某些时候我想清除这个数组并用新的数组更新。我使用下面的代码进行清除，但是当我通过 react-developer 工具检查状态时，数组仍然没有发生任何事情。请帮助我作为 ReactJS 的新手。

state = {
        formData:{
            level:{
                element:'select', 
                value:'Bachelors',
                label:true,
                labelText:'Level',
                config: {
                    name:'department',
                    options: [
                        {val :"Bachelors", text:'Bachelors'},
                        {val:"Masters", text:'Masters'}
                    ]
                },
                validation: {
                    required:false,
                }
                ,
                valid:true,
                touched:false,
                validationText:'',
            },

现在我想通过以下方式清除选项数组：

let {options} = this.state.formData.level.config
options = []
this.setState({
    options:options
})

但是我的数组没有清除。我怎样才能做到这一点？

【问题讨论】：

您正在状态中设置一个名为 options 的新属性。您需要使用扩展运算符复制现有状态，然后将 this.state.formData.level.config.options 替换为您想要替换的任何内容。
嗨，仍然学习编程，我刚刚为您提供了一个解决方案。让我知道这是否有帮助。

标签： javascript arrays reactjs multidimensional-array

【解决方案1】：

你应该知道的两件事。

1) 当您执行this.setState({ options: options }) 时，您不会更新属于formData 对象的options 数组。您正在 state 中创建一个名为 options 的全新键值对。如果您尝试打印更新后的状态，您会发现您的状态现在看起来像：

state = { formData: {...}, options: [] }

2）您正在尝试直接改变状态，（更改属于现有对象的值）。这违反了 React 原则，因为为了让组件正确地重新渲染而不会产生副作用，您需要提供一个全新的状态对象。

由于嵌套如此之深，可能最好的选择是像这样深度克隆您的状态对象：

const newFormData = JSON.parse(JSON.stringify(this.state.formData))
newFormData.level.config.options = []

this.setState({
  formData: newFormData 
})

这可能是清除表单数据对象的最安全方法。这是一个具有此功能的工作沙箱。请参考：

https://codesandbox.io/s/naughty-cache-0ncks

【讨论】：

【解决方案2】：

创建newstate 并更改properties 然后将新状态应用于setState() 函数，如下所示：

 changestate = ()=>{
   var newstate = this.state;
   newstate.formData.level.config.options=["hello","wow"]
   this.setState(newstate)
 }

【讨论】：

【解决方案3】：

您没有清除选项状态，而是使用空数组创建新状态。您也可以使用 JSON stringify 和 JSON parse 克隆整个对象。其他更新嵌套状态而不发生变异的方法是使用扩展运算符。语法看起来有点复杂，但在保留所有内容的同时扩展嵌套对象很棘手。

const newFormData = {
   ...this.state.formData,
   level: {
          ...this.state.formData.level,
          config: {
                  ...this.state.formData.level.config,
                  options: []
                  }
          }
};

this.setState({
   formData: newFormData 
})

【讨论】：