React Native中for循环解构Object.entries()触发ReferenceError问题

问题情况 #

同一个对象，Object.entries(object)打印出来是正常的键值对数组：

[
   "2022-01-02",
   { "a":[objects], "b": object, "c":[objects] }
]

用数组解构写for...of循环直接报错：

for (const [date, items] of Object.entries(object)) { console.log(date) }
// 报错：ReferenceError: Property ‘date’ doesn’t exist

但手动通过索引取元素的写法却能正常运行：

for (const entries of Object.entries(object)) {
      const date = entries[0]
      const items = entries[1]
      console.log(date)
 }

为啥会这样？ #

十有八九是Babel转译的配置出问题了：
你的项目用的Babel解构转译插件（比如@babel/plugin-transform-destructuring）版本太老，或者配置不对，转译的时候把数组解构的语法错当成了对象解构。转译后的代码会去Object.entries返回的数组元素里找date和items属性——但数组元素是字符串和普通对象，根本没有这些属性，自然就报错了。

另外也有可能是你用的React Native版本太老，内置的Hermes引擎对ES6数组解构结合for...of的语法支持有bug，但这种情况比Babel配置问题少见得多。

怎么解决？ #

• 先检查Babel插件，把@babel/plugin-transform-destructuring更到最新版，用默认配置即可，别随意修改。
• 或者直接把React Native更到新的稳定版本，确保Hermes引擎对ES6语法支持到位。
• 暂时可以继续用手动取索引的写法，等转译或引擎的问题修复后再换回去。

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