React中如何从JSON文件动态更新常量对象的属性值？

1. 重构ConfigService，替换硬编码常量 #

把原来的静态常量改成服务中可动态更新的变量，同时修复getConfig函数的语法问题（避免await与then嵌套冗余，修正返回语句错误）：

// config.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  // 用变量替代原常量，初始值设为null或默认值
  public mysettings: {
    userid: string;
    conf: {
      sessionDuration: number;
      mac: string;
    };
  } | null = null;

  constructor() {
    // 服务初始化时自动加载配置
    this.loadConfig();
  }

  // 简化后的配置加载方法
  async loadConfig(): Promise<void> {
    try {
      const response = await fetch('./data/data.json');
      if (!response.ok) {
        throw new Error(`配置加载失败: ${response.statusText}`);
      }
      const jsonData = await response.json();
      // 将加载到的JSON数据赋值给mysettings
      this.mysettings = jsonData;
    } catch (error) {
      console.error('配置加载出错:', error);
      // 加载失败时设置默认值，避免组件报错
      this.mysettings = {
        userid: 'default-id',
        conf: {
          sessionDuration: 30,
          mac: 'default-mac'
        }
      };
    }
  }

  // 提供重新加载方法，用于JSON文件更新后手动触发
  async reloadConfig(): Promise<void> {
    await this.loadConfig();
  }
}

2. 组件中使用动态配置 #

由于配置是异步加载的，组件需确保配置就绪后再使用，以下两种常用方式：

方式一：组件初始化时等待配置加载 #

// 示例组件
import { Component, OnInit } from '@angular/core';
import { ConfigService } from './config.service';

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="config">
      用户ID: {{ config.userid }}<br>
      会话时长: {{ config.conf.sessionDuration }}分钟
    </div>
    <div *ngIf="!config">加载配置中...</div>
  `
})
export class ExampleComponent implements OnInit {
  config: any;

  constructor(private configService: ConfigService) {}

  async ngOnInit(): Promise<void> {
    // 若服务初始化未完成加载，等待加载完成
    if (!this.configService.mysettings) {
      await this.configService.loadConfig();
    }
    this.config = this.configService.mysettings;
  }

  // 手动刷新配置（JSON更新后调用）
  async refreshConfig(): Promise<void> {
    await this.configService.reloadConfig();
    this.config = this.configService.mysettings;
  }
}

方式二：用RxJS Observable监听配置变化（更灵活） #

如果需要实时响应配置更新，可将配置包装为Observable：

// 修改后的config.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  private configSubject = new BehaviorSubject<{
    userid: string;
    conf: {
      sessionDuration: number;
      mac: string;
    };
  } | null>(null);
  // 对外暴露只读Observable
  public config$ = this.configSubject.asObservable();

  constructor() {
    this.loadConfig();
  }

  async loadConfig(): Promise<void> {
    try {
      const response = await fetch('./data/data.json');
      if (!response.ok) {
        throw new Error(`配置加载失败: ${response.statusText}`);
      }
      const jsonData = await response.json();
      this.configSubject.next(jsonData);
    } catch (error) {
      console.error('配置加载出错:', error);
      this.configSubject.next({
        userid: 'default-id',
        conf: {
          sessionDuration: 30,
          mac: 'default-mac'
        }
      });
    }
  }

  async reloadConfig(): Promise<void> {
    await this.loadConfig();
  }
}

组件中订阅Observable：

// 示例组件
import { Component } from '@angular/core';
import { ConfigService } from './config.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="config$ | async as config">
      用户ID: {{ config.userid }}<br>
      会话时长: {{ config.conf.sessionDuration }}分钟
    </div>
    <div *ngIf="!(config$ | async)">加载配置中...</div>
  `
})
export class ExampleComponent {
  config$: Observable<any>;

  constructor(private configService: ConfigService) {
    this.config$ = configService.config$;
  }

  // 手动刷新配置
  async refreshConfig(): Promise<void> {
    await this.configService.reloadConfig();
  }
}

3. 处理JSON文件更新 #

• 当JSON文件在运行时被替换或更新，直接调用reloadConfig()方法即可重新加载最新配置。
• 若需要自动刷新，可添加定时逻辑（比如每隔一段时间调用reloadConfig()），但需注意频繁请求的性能影响。

内容的提问来源于stack exchange，提问作者Sandeep Thomas