Question

// 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 {1}}。是预期的行为还是我错过了什么？

codesandbox.io https://codesandbox.io/s/nrn9o71jmm

的链接

请检查浏览器控制台而不是内置的代码和框控制台，以查看错误。

Answer 1

为什么我不能在myAsyncFunction中重新分配dataObj，即使它是用let在其他文件中定义的

答案是您收到的另一条错误消息：

“ dataObj”是只读的

所有导入均为只读。它们的定义无关紧要。 ReferenceError可能是由于代码的转换方式所致。

但是可以在我调用changeDataObj和dataObj的同一文件中定义时起作用

因为dataObj是该文件中的常规let绑定。

Answer 2

如果您只是想拥有一个名为dataObj的局部变量（可能不是一个好选择，但我会假设这样），那么您需要的语句是let：

let dataObj = Object.assign({}, response);

然后，全局dataObj被忽略，您将获得一个新变量。不过，我认为这可能确实令人困惑。

正如Felix解释的那样，所有导入都被标记为只读，因此无法为其分配新值。这实际上是一个很棒的功能。

为什么重新分配导入的对象会引发ReferenceError？

2 个答案: