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.log1data=====>{x1:xxx,x2:{x2_1:xxx,x2_2:xxx,},x3:{x3_1:xxx,}//...}//console.log2listData====>{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只更新其中某一项就行了