React中如何获取条件动态导入返回的Promise值并在组件作用域使用

你遇到的不是变量作用域问题，和把dat从let改成var完全无关，根本原因是动态import()是异步操作，完全遵循JS单线程的事件循环执行规则。

你代码的实际执行顺序和你预想的存在本质差异：

1. 初始化变量dat = []
2. 进入if判断，触发动态import('./hi.js')——此时浏览器仅仅发起加载hi.js的请求，不会阻塞后续代码执行，直接向下运行
3. 顺序执行同一if块下的console.log(dat)，此时hi.js尚未加载完成，Promise没有resolve，dat自然是空数组
4. 整个App函数执行完毕，返回JSX完成首次渲染，所有写在同步位置的console.log都已经执行完成
5. 经过几十毫秒的加载流程，hi.js加载完成，才会触发.then内的回调给dat重新赋值，但此时你之前写的所有同步位置的日志早已执行完毕，根本读不到新赋值的内容。

哪怕你把dat声明到全局作用域，只要赋值动作发生在异步回调里，所有同步执行阶段读取dat的代码，永远只能拿到赋值前的旧值——这是语言执行机制决定的，不是调整作用域范围能解决的问题。

你提到这些数据是固定不变的静态内容，完全没必要用动态导入，最省事的方式是调整导入逻辑：

方案1：改用静态导入（最匹配你的场景） #

动态导入的设计目标是做代码分割、按需加载，降低首屏资源体积，用来承载固定静态数据属于绕远路，平白增加异步等待的复杂度。直接在App组件顶部用静态导入，就能同步拿到内容：

// App.js 顶部直接引入hi.js导出的内容
import { printHi } from './hi.js';

function App() {
  let dat = [];
  let name = "anki";
  if(name === "anki"){
    // 同步直接赋值，无等待流程
    dat = printHi;
    console.log(dat); // 正常输出目标数据
  }
  console.log(dat); // 此处可以正常读取到赋值后的内容

  return (
    <div className="App">
     <h1>HI</h1>
    </div>
  );
}

export default App;

静态导入是编译阶段就完成解析的，没有异步等待流程，赋值动作在同步执行流内完成，同作用域的所有代码都能正常读到值。

方案2：必须保留动态导入时，结合React状态存值 #

如果因为业务逻辑必须使用动态导入（比如需要做代码分割），直接给函数内的普通变量赋值是没法被React感知的——哪怕你拿到数据赋值给dat，组件也不会重新渲染，视图不会更新，后续的逻辑读值也拿不到最新内容。需要用React提供的useState把异步获取的数据存储到组件状态中：

import { useState, useEffect } from 'react';

function App() {
  // 用组件状态存储数据，替代普通let/var变量
  const [dat, setDat] = useState([]);
  const name = "anki";

  // 组件挂载后执行动态导入逻辑
  useEffect(() => {
    if(name !== "anki") return;
    import('./hi.js').then((data) => {
      // 拿到数据后更新状态，触发组件重新渲染
      setDat(data.printHi);
    })
  }, [])

  // 每次组件渲染时都能读到最新的dat值
  console.log('当前dat值：', dat);

  return (
    <div className="App">
     <h1>HI</h1>
     {/* 可以直接在视图中使用dat的数据 */}
     {dat.map(item => <p key={item.name}>{item.name}的爱好是{item.hobby}</p>)}
    </div>
  );
}

export default App;

很多人遇到这个问题时会尝试把let改成var、或者把变量提到组件外层作用域，这类调整完全无效：

• 问题核心是执行时序的差异，和变量的作用域范围没有关系
• 异步回调的执行时机永远晚于当前同步执行流的全部代码，不管变量声明在哪个层级，同步阶段读到的都是异步赋值前的旧值
• 在React函数组件中，普通局部变量的赋值不会触发组件重渲染，哪怕你拿到了数据，只要不通过state更新，视图和后续的逻辑读值都拿不到最新结果

内容的提问来源于stack exchange，提问作者Harish Verma