React中如何一行代码克隆State数组并满足ESLint解构规则？

没问题，我刚好有个完美的解决方案满足你的需求——既不用改ESLint规则，也不用增加代码行数，还能符合解构要求。

你可以把原来的两行代码合并成一行，写法如下：

const { data } = this.state, newData = [...data];

这样写既通过解构从this.state里拿到了data（完美符合ESLint的react/destructuring-assignment规则），又在同一行完成了数组克隆并赋值给newData，完全符合你的所有要求，而且可读性也很好。

另外还有一种稍显巧妙但可读性弱一点的写法，用立即执行函数来做解构：

const newData = [...(({ data }) => data)(this.state)];

它通过立即执行函数先解构出this.state.data，再直接展开克隆。不过相比第一种合并声明的方式，还是前者更直观好懂，更推荐你用第一种。

内容的提问来源于stack exchange，提问作者MiBol