ReactJS动态加载JSON文件失败：如何同步赋值并渲染？

问题说明 #

需求：在React组件中，用户选择某个ID时，动态加载对应路径的JSON文件并展示其中的信息。
问题：当前代码中，异步导入JSON后给普通变量imported_json赋值无效，控制台打印该变量为undefined，无法渲染imported_json.modelName。

原始代码 #

import React from 'react';
import { useState } from 'react';

export default function Dashboard() {
  const [selected, setSelected] = useState("");
  let imported_json;

  const handleSelect = (item: any) => {
    setSelected(item);
    const jsonPath = `./json/${selected}.json`;
    import(`${jsonPath}`).then((jsonFile) => {
      console.log(jsonFile); // 能正确打印JSON文件内容
      imported_json = jsonFile;
    });
  };

  console.log(imported_json); // 打印undefined

  return (
    <>
      <div>
        <Select label="Select id" onChange={handleSelect}>
          <Option value="1">1</Option>
          <Option value="2">2</Option>
          <Option value="3">3</Option>
        </Select>
      </div>
      <div>
        {imported_json.modelName}
      </div>
    </>
  );
}

JSON文件示例 #

{
  "modelName" : "my_model"
}

解决方案 #

问题根源 #

1. import()是异步操作，普通变量imported_json的变化不会触发React组件重新渲染，就算赋值成功也不会更新视图。
2. setSelected是异步更新状态的操作，在handleSelect中刚调用setSelected(item)就使用selected拼接路径，此时selected还是旧值，会导致JSON路径错误。

修改后的代码 #

import React from 'react';
import { useState } from 'react';

export default function Dashboard() {
  const [selected, setSelected] = useState("");
  // 用useState定义状态存储导入的JSON数据
  const [importedJson, setImportedJson] = useState(null);

  const handleSelect = (item: any) => {
    setSelected(item);
    // 直接用选中的item拼接路径，避免setSelected异步更新导致的旧值问题
    const jsonPath = `./json/${item}.json`;
    import(`${jsonPath}`).then((jsonFile) => {
      // 更新状态，触发组件重新渲染
      setImportedJson(jsonFile.default);
      // 注意：如果你的JSON导入后是直接的对象而非嵌套在default里，就用jsonFile代替jsonFile.default
    }).catch(err => {
      console.error('加载JSON失败:', err);
    });
  };

  return (
    <>
      <div>
        <Select label="Select id" onChange={handleSelect}>
          <Option value="1">1</Option>
          <Option value="2">2</Option>
          <Option value="3">3</Option>
        </Select>
      </div>
      <div>
        {/* 先判断数据是否存在，避免渲染时报错 */}
        {importedJson ? importedJson.modelName : '请选择一个ID'}
      </div>
    </>
  );
}

关键修改点 #

• 使用useState定义importedJson状态，React会监听状态变化并自动触发组件重新渲染。
• 直接使用选中的item拼接JSON路径，避开setSelected异步更新的问题。
• 异步导入JSON后，调用setImportedJson更新状态，让视图同步更新。
• 渲染时增加空值判断，防止因importedJson为null时访问modelName导致报错。

注意事项 #

• 确保JSON文件的路径正确，比如./json/1.json确实存在于项目对应目录中。
• 部分打包工具（如Webpack）导入JSON时，数据会被包裹在default属性中，需要使用jsonFile.default获取；如果导入后直接是JSON对象，则直接使用jsonFile即可。

内容的提问来源于stack exchange，提问作者chae seongwoo