React 中的导入对象未定义答案

【问题标题】：Import object in React not definedReact 中的导入对象未定义
【发布时间】：2020-02-18 21:02:32
【问题描述】：

在反应中：

wording.js

export  const wording = {
  id1: 'record',
  id2: 'play'
};

test.js

import { wording } from "...";

function Test(props) {

  const onCellClicked = (e) => {
    console.log("Hello", wording.id1);
    if(wording.id1 ) {
      ...
    }
  }

  return (
    <button onClick={onCellClicked} >Press me</button>
  )

}

当我打电话并按下按钮时，console.log 会正确响应（得到record）。但是，通过使用 Chrome 开发工具并在if 上设置断点，wording 没有定义！！对此有什么合乎逻辑的解释吗？

【问题讨论】：

请添加一个屏幕截图，说明您是如何调试它的，您的断点在哪里，您将鼠标悬停在哪里wording 以及所有可能的信息。
我的朋友今天早上也做了同样的事情。他忘记添加 .js 作为文件扩展名。希望它能解决您的问题。

标签： reactjs google-chrome-devtools

【解决方案1】：

...如果没有定义wording，则设置断点...

Wich wording ？在您的文件中，您有 2 个地方使用 wording。

在反应文件中，有2个地方有某个变量

导入的地方
你引用它的地方（使用它）

如果你将鼠标悬停在你使用它的地方，你会看到变量值

例如

但是如果你将鼠标悬停在你导入它的地方，它将是未定义的

发生这种情况是因为导入的变量超出范围，您肯定无法看到它的值。

【讨论】：

其实他的截图显示组件在使用的时候也是未定义的
@Unknowndeveloper 如果你跳到下一行，它会继续未定义吗？

【解决方案2】：

这发生在我身上。有时 React 编译它，有时它没有。这似乎是正确的语法，所以我不能告诉你为什么会发生这种情况，但我可以告诉你我做了什么来解决它。我只需要稍微重组我的文件。所以对于你的，你会改变：

wording.js

export default {
  id1: 'record',
  id2: 'play'
};

test.js

import wording from "...";

function Test(props) {

  const onCellClicked = (e) => {
    console.log("Hello", wording.id1);
    if(wording.id1 ) {
      ...

【讨论】：