美文网首页
ES6 变量解构 - Invalid attempt to de

ES6 变量解构 - Invalid attempt to de

作者: 司鑫 | 来源:发表于2017-12-09 20:46 被阅读4666次

需求描述
在使用 React 的过程中,parent container 在 componentDidMount 中发送一个请求,然后在 render 中将请求的数据传递给 child component , child component 在 render 的时候会会调用一个方法并将 parent 传过来的数据当做参数,最后返回一个数组(前提是传过去的不为空),对于返回的数据会以解构的方式获取。简化后的代码如下:

class Parent extends Component {
  componentDidMount () {
      this.props.getUser(1)
  }
render () {
    return <Child user={this.props.user} />
}
const mapStateToProps = state => ({user: state.user})

export default connect(mapStateToProps)(Parent);

}

export default class Child extends Component {
  getParams(user){
   if(user){
    return [user.id,user.name,user.age]
   }
 }
}
render () {
    const [id=0,name='',age=0] = getParams(this.props.user) 
    return <div/>
}
}

错误

Uncaught (in promise) TypeError: Invalid attempt to destructure non-iterable instance
  at my-student-task-status-list-box.js:18
  at AssistantSectionList.render (my-student-task-status-view.js:65)
  at ReactCompositeComponent.js:793
  at measureLifeCyclePerf (ReactCompositeComponent.js:73)
  at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:792)
  at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:819)
  at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:359)
  at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
  at Object.mountComponent (ReactReconciler.js:43)
  at Object.updateChildren (ReactChildReconciler.js:119)
  at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:204)
  at ReactDOMComponent._updateChildren (ReactMultiChild.js:308)
  at ReactDOMComponent.updateChildren (ReactMultiChild.js:295)
......

解决过程

  1. 第一次遇到这个问题,没能从错误信息上获取到比较多的信息,通过观察代码也没能发现哪个地方有问题
  2. Google 了一下这个错误,发现这个错误是和变量解构有关的,于是再次回到代码
  3. 发现用到解构的地方只有调用 getParams 这个地方,突然想到,child 在第一次 render 的时候,user 中的数据是 undefined ,那么这个方法调用后返回的结果就是 undefined ,会不会是这个地方的问题,但是我这已经给了初始值呀,于是试一试改了下代码
const [id,name,age] = getParams(this.props.user)  || [0,'',0]
  1. 发现没有报错了,这个地方出错的点是在于变量的解构这块还不够熟悉
总结

以下几种解构方式都会报错

  • let [foo] = 1;
  • let [foo] = false;
  • let [foo] = NaN;
  • let [foo] = undefined;
  • let [foo] = null;
  • let [foo] = {};

前五个是因为将等号右边的值转成对象后不具备 Iterator 接口
最后一个是本身就不具备 Iterator 接口

原生具备 Iterator 接口的数据结构如下。
Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象

相关文章

  • ES6 变量解构 - Invalid attempt to de

    需求描述在使用 React 的过程中,parent container 在 componentDidMount ...

  • 04- 解构赋值

    1、ES6 解构赋值、数组解构 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(De...

  • ES6

    ES6: ES6 新语法 1.变量 解构赋值 (解构赋值对应的python里的序列解包) 解构赋值方式一: 解构赋...

  • 解构赋值

    解构赋值:ES6 中新增了变量赋值的方式,从数组和对象中提取值,对变量进行赋值。 单独赋值给变量,解构赋值。 解构...

  • 『ES6脚丫系列』变量的解构赋值

    『ES6脚丫系列』变量的解构赋值 第一章:变量的解构赋值的概念 【01】Q:什么是变量的解构赋值?有哪些方式? 吃...

  • es6的变量解构赋值

    一、解构过程 解构是指在es6的规则中,允许从数组或变量中提取变量并对其进行赋值的操作,若在解构不成功时,会给变量...

  • ES6知识点复习(二)

    变量的解构赋值 解构赋值允许指定默认值,es6内部使用严格相等运算符 === 默认值可以引用解构赋值的其他变量,但...

  • ES6笔记(解构赋值)

    ES6笔记(解构赋值) 解构赋值 变量的解构: 解构赋值允许指定默认值。 解构赋值必须保证赋值方 被赋值方类型一...

  • ES6入门笔记

    变量的解构赋值 数组的解构赋值ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Dest...

  • 变量的结构赋值

    ES6 变量的解构赋值 解构赋值本质上是“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。 解构...

网友评论

      本文标题:ES6 变量解构 - Invalid attempt to de

      本文链接:https://www.haomeiwen.com/subject/ulkpixtx.html