使用ES6和React进行数组的解构和重新排序

Question

我想使用解构方法在React容器中重新排序我的数组，这应该非常简单。 给定一个数组a1 = ['hello', 'hi', 'hola']

componentDidMount() {
  const { a1 } = this.props
  this.a2 = []
  [a2[2], a2[0], a2[1]] = a1  --> this line give an error!!
  console.log('new ordered array', a2) // ['hola', 'hello', 'hi'] --> this print properly my new array
}

如果我尝试在控制台中打印或在render中使用它，我会得到undefined。 我在那行代码中收到的错误是: 未捕获（在promise中）TypeError: 无法设置未定义的属性“#<Object>” 我真的不明白为什么我可以在console.log中正确打印该值，但是当我尝试在代码中实际使用它时，它就无法工作。 这可能与React周期有关吗？ 我也尝试将其放在我的状态中，但是仍然收到相同的错误。

- Giorgia Sambrotta

---

请查看出错的那一行，你使用了点号（.）而应该使用逗号。 - user3151902

它被称为解构，而不是拆解。 - PeterMader

感谢 @PeterMader - Giorgia Sambrotta

Answer 1

这行代码会出错，因为在这种罕见的情况下，自动添加分号会让你失望。不要以 ( 或 [] 开始新行，否则解释器会将其视为前一行的延续，并将 [ 或 ( 视为属性访问操作或函数调用。

以下代码可以正常工作：

this.a2 = [];
[a2[2], a2[0], a2[1]] = a1

或者这个：

this.a2 = []
;[a2[2], a2[0], a2[1]] = a1

- dfsq

---

这正是发生的事情！问题在于“我的Lint不允许我添加分号-.-前端开发，非常有趣:) 无论如何，我已经用另一种方式解决了，但至少现在我知道了，谢谢！ - Giorgia Sambrotta

Answer 2

在这行代码中，,应该被替换成.：[a2[2]，a2[0]。a2[1]] = a1 --> 这行代码会出错！！

- Saravanan I

---

你说得对，但我在这里只是打错了问题，在我的实际代码中，有一个逗号。 - Giorgia Sambrotta