全局导入的变量未定义

IT技术 javascript reactjs
2021-05-12 19:15:40

我的FinalVariables.js 中有三个变量,如下所示:

var finalTaskName = 'abc'
var finalQuantityTaskExecuted = 0
var finalQuantityTaskCompletion = 100

export {finalTaskName, finalQuantityTaskExecuted, finalQuantityTaskCompletion}

在另一个文件中,我使用以下行导入它们:

import {finalTaskName,finalQuantityTaskExecuted,finalQuantityTaskCompletion} from './FinalVariables'

但是,当我尝试在另一个文件中使用上述三个变量中的任何一个时,它们总是undefined. 是否有一个原因?

我是 Javascript 和 React 的新手,任何帮助将不胜感激!谢谢!

-------------------------------------------------- - - - - - - - - - - - - - - - - - - - - -更新 - - - - -------------------------------------------------- ---

我按如下方式导入了变量:

import * as finalVariables from './FinalVariables' 

当我做一个 console.log(finalVariables.finalTaskName)

我能够打印正确的值,但是当我尝试为其分配一个值时:

finalVariables.finalTaskName = this.props.item[0].particulars 

我收到以下错误:

无法设置只有 getter 的 # 属性 finalTask​​Name

============================ 更新 ==================== ==================

我现在能够正确更新值,但是在我导入这些值的主类 TasksInsert.jsx 中,我在渲染函数中有这个,

<p>{finalVariables.finalTaskName}</p> 
<p>{finalVariables.finalQuantityTaskExecuted}</p> 
<p>{finalVariables.finalQuantityTaskCompletion}</p> 

为什么这些值没有根据最近的变化反映出来?我的状态构造函数如下所示:

this.setState({ finalVariables })

-------------------------------------------------- - - - - - - - - - - 更新 - - - - - - - - - - - - - - - --------

我对一个名为 BOQSuggestions 的全局数组采用了类似的方法,我将数据推送到该数组并且它起作用了,即对它的更改在全局范围内反映出来。

另外,这是我唯一需要共享数据的地方,这就是我不想使用 Redux 的原因。

有人可以建议代码来解决这个问题吗?我仍然被困在这里并且是 Javascript 的新手。

2个回答

module导出设计为只读。如果你想要一些全局可变状态,你应该通过从module导出一个可变对象来实现:

// final-vars.js

export default {
  finalTaskName: 'abc', 
  finalQuantityTaskExecuted: 0, 
  finalQuantityTaskCompletion: 100
};
// other.js

import finalVariables from './final-vars';

// ...

finalVariables.finalTaskName = this.props.item[0].particulars // Allowed

您可以在FinalVariables.js文件中创建一个函数

const setFinalTaskName = (value)=>finalTaskName=value

从您的组件导出并调用它:

setFinalTaskName(--new-value--)