急救！react有什么最简单的深拷贝方法吗？

Question

问题描述

从后台拿到的数据有很多层,但是通过this.setState只能赋值到第一层,之前请求过类似的都不会出现这种情况.一来希望大神们能稍微解释一下,而来希望有一个能快速解决的方法。感激不尽

...
state = {
  listData: {}
}
...

fetchList({
  ...
})
.then(data => {
    console.log('data ====>', data);
    this.setState({
      listData: Object.assign({}, data);
    }, () => {
     console.log('listData =====>', this.state.listData);
    })
})

data深度的值无法正确复制给data

// console.log 1
data =====> {
  x1: xxx,
  x2: {
    x2_1: xxx,
    x2_2: xxx,
  },
  x3: {
    x3_1: xxx,
  }
//...
}

// console.log 2
listData ====> {
 x1: xxx,
 x2: {},
 x3: {},
}

第二层开始的都被过滤为空 无法赋值.

Answer 1

cdn引入lodash库，开发中能省不少事，你说的深拷贝用_.cloneDeep就能解决

Answer 2

可以尝试一下immutable.js

不管怎样，深拷贝总会带来性能问题，
可以从别的角度来解决这个问题，比如精简数据结构

以前只有一个state，现在拆分为多个，每次setState只更新其中某一项就行了

Answer 3

let newObj = JSON.parse(JSON.stringify(oldObj))

Answer 4

ES6中的Object.assgin()是实现浅拷贝的。JS深拷贝与浅拷贝，与React没关系的。
我们也在做React项目，给出两种解决方案吧
1、按楼主的想法，实现Object深拷贝：

JSON.parse(JSON.stringify(oldObj)); //简单粗暴没有之一，注意这个方法会忽略掉为undefined的属性，不过数据库一般存的是null而非undefined(后台一般是不会帮你把null转成undefined的，吃力不讨好~），所以也可能忽略这个缺点

2、完全没必要调用复制data，直接调用setState，React会帮你处理复制的^_^

this.setState({
    listData: data
})

//然后在任意方法中console.log(this.state.listData)
结束~！