Javascript常量在chrome开发控制台中显示为未定义和未定义

我有一个const

newProducts

返回

undefined

，但在chrome开发控制台中说它没有未定义：

它说它是在控制台的黄色突出显示的文本中定义的，当鼠标悬停在上面时未定义。它不应该是未定义的。我已经遍历了代码，

映射中的
返回值
正在返回值。为什么这个
const
会出现
undefined
而不是
undefined

searchResults.reducer.js

// @flow
import initialState from '../../config/config'
import {
  FETCH_PRODUCTS_REJECTED,
  UPDATE_SEARCH_RESULTS
} from '../search-page/searchPage.action'
import { SET_SELECTED_SHOP } from '../search-results/searchResults.action'

const searchResults = (
  initialResultsState: [] = initialState.get('searchResults'),
  action: Object): string => {
  switch (action.type) {
    case UPDATE_SEARCH_RESULTS: {
      const newProducts = action.payload.products.map(product => {
        return {
          shop: {
            id: product.shop[0].f1,
            name: product.shop[0].f2,
            coordinate: {
              latitude: product.shop[0].f4,
              longitude: product.shop[0].f3
            },
            selected: false
          },
          products: product.products
        }
      })
      return initialResultsState.set('products', newProducts)
    }
    case SET_SELECTED_SHOP: {
      const newProducts = initialResultsState.get('products').map(product => {
        if (product.shop.id === action.payload) {
          return {
            shop: {
              ...product.shop,
              selected: true
            },
            products: product.products
          }
        } else {
          return {
            shop: {
              ...product.shop,
              selected: false
            },
            products: product.products
          }
        }
      })
      return initialResultsState.set('products', newProducts)
    }
    case FETCH_PRODUCTS_REJECTED: {
      console.log('there was an issue getting products: ',
        action.payload)
      return initialResultsState
    }
    default:
      return initialResultsState
  }
}

export default searchResults

我认为这是transpilation对
const
的副作用，因为在transpilation之后，JS运行时实际上必须跟踪两个不同的变量

React Native使用Babel传输（）

您在不同的块中多次定义同名常量，在ES2015中也可以，但在ES5中不存在此概念，因此此类常量将传输到具有不同名称的变量

例如，考虑这个ES2015片段：
const i = Date.now() % 2;
switch(i) {
    case 0: {
        const x = "zero";
        console.log("x", x);
    }
    case 1: {
        const x = "one";
        console.log("x", x);
    }
    default: {
        const x = "wat";
        console.log("x", x);
    }
}

与(← 看到它的行动）以：

因此在本例中，JS运行时实际上有3个不同的变量来表示
x

因此，您可能会看到一行带有
foo
，您的浏览器通过a显示，但在“现实”中，浏览器看到的可能是
\u foo2
，因此取决于很多因素（传输设置、源代码映射生成、Chrome版本、代码的其余部分，以及您在调用堆栈中的确切位置…），Chrome开发工具可能很难跟踪这一点，并在查看
foo
时决定应该选择哪个
foo
或
\ufoo2

将ES2015传输到ES5的示例和源地图：

（行为略有不同，因为它取决于许多参数，但它显示了使用相同名称传输常量的问题——在另一个测试中，使用不同的transpiling+sourcemapping参数，我设法得到了与您的情况类似的结果）


暗示
（我希望以下内容对O.p.非常明显，但在答案中留下可能有用）

使用
const
语义，在两个不同的块中有两个同名的不同常量。在我看来，定义一个带有块范围的常量（或变量使用
let
而不是
var
）是很有用的，这样可以避免
var
范围（范围到最近的父函数）带来的意外，但是在两个相邻的块中定义具有相同名称的变量或常量会引起混淆（无论是否传送）

决定这两个符号是否代表同一事物（取决于您），然后：


如果是，请使用
let
将它们定义为父范围的单个变量

如果不是，请将它们保留为
const
，但使用两个不同的名称。代码将更清晰，在编译之后，由开发工具显示的调试信息应该更有用

这是在浏览器中运行的ES2015，还是将其传输到ES5，然后使用源地图进行调试，使其显示为原始ES2015？@HuguesMoreau这是react native在幕后处理的。我认为它是传输的。
"use strict";

var i = Date.now() % 2;
switch (i) {
    case 0:
        {
            var x = "zero";
            console.log("x", x);
        }
    case 1:
        {
            var _x = "one";
            console.log("x", _x);
        }
    default:
        {
            var _x2 = "wat";
            console.log("x", _x2);
        }
}