急救！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 1data =====> {   x1: xxx,   x2: {     x2_1: xxx,     x2_2: xxx,   },   x3: {     x3_1: xxx,   }//...}// console.log 2listData ====> {  x1: xxx,  x2: {},  x3: {},}第二层开始的都被过滤为空 无法赋值.

Answer 1

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)
结束~！

Answer 2

可以尝试一下immutable.js

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

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