// fileA.js
export let dataObj = {name: "intitial name"};
export let changeDataObj = () => {
dataObj = Object.assign({}, {
name: "changed in changeDataObj fn"
});
}
//fileB.js
import {dataObj, changeDataObj} from "./fileA.js";
const myAsyncFunction = async () => {
const response = await myApiCall();
console.log(dataObj); // {name: "initial name"}
console.log(response); // {name: "name from api"}
dataObj = Object.assign({}, response);
// Throws ReferenceError: dataObj not defined on my computer with Webpack, babel
// throws Error: "dataObj" is read-only. in codesandbox.io vanilla template using parcel. Codesandbox link https://codesandbox.io/s/nrn9o71jmm
// but,
changeDataObj();
console.log(dataObj); // {name: "changed in changeDataObj fn"}
}
为什么我不能在myAsyncFunction
中重新分配dataObj,即使它在不同的文件中使用let
定义,但如果我调用changeDataObj
,它在与dataObj
相同的文件中定义,则可以工作。这是预期的行为还是我错过了什么?
codesandbox.io https://codesandbox.io/s/nrn9o71jmm的链接
请检查浏览器控制台而不是内置的codesandbox控制台以查看错误。
为什么我不能在
myAsyncFunction
中重新分配dataObj,即使它是在不同文件中使用let定义的
答案是在您收到的其他错误消息中:
“dataObj”是只读的
所有导入都是只读的。它们如何定义并不重要。 ReferenceError
可能是由于代码如何转换。
但是如果我调用与
changeDataObj
在同一文件中定义的dataObj
,则可以正常工作
因为dataObj
是该文件中正常的let
绑定。
如果你只是想要一个名为dataObj
的局部变量(这可能不是一个好的选择,但我会这么认为),那么你需要的是你的陈述的let
:
let dataObj = Object.assign({}, response);
然后忽略全局dataObj
并获得一个新变量。不过,我认为这可能会令人困惑。
正如Felix所解释的那样,所有导入都标记为只读,因此无法分配新值。这实际上是一个很棒的功能。