时间戳

首页 > 解决方案 > 为什么重新分配导入的对象会抛出 ReferenceError？

javascript - 为什么重新分配导入的对象会抛出 ReferenceError？

问题描述

// 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"}
}

为什么我不能在里面重新分配 dataObj，myAsyncFunction即使它是let在不同的文件中定义的，但是如果我调用changeDataObj它在同一个文件中定义的dataObj. 这是预期的行为还是我错过了什么？

codesandbox.io 的链接https://codesandbox.io/s/nrn9o71jmm

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

标签： javascriptimportes6-modulesreferenceerror

解决方案

为什么我不能在里面重新分配 dataObjmyAsyncFunction即使它是用 let 在不同的文件中定义的

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

“dataObj”是只读的

所有导入都是只读的。如何定义它们并不重要。这ReferenceError可能是由于代码的转换方式。

但如果我调用changeDataObj在同一个文件中定义的dataObj

因为dataObj是该文件中的普通let绑定。

推荐阅读