在react app中使用全局配置对象

Question

我有生成器定义的config.js文件;

'use strict';

import baseConfig from './base';

let config = {
  appEnv: 'dev',  // feel free to remove the appEnv property here,
  baseUrl:'https://mod970274.sharepoint.com',//'http://maliye.milliemlak.gov.tr',
  listName:''
};

export default Object.freeze(Object.assign({}, baseConfig, config));

以及我如何称呼它。

import config from 'config';

class FooterState {
    @observable items =[];
    constructor(){
        config.listName = 'FooterMenu';
        this.getItems();
    }
    getItems() {
  fetch(`${config.baseUrl}/_api/web/lists/getbytitle('${config.listName}')/items`, {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',

但是尽管使用示例看起来相同，但它会在构造函数中抛出未定义的异常。这就是它的样子：

如何在项目

中的任何地方使用配置对象

Answer 1

export default Object.freeze(Object.assign({}, baseConfig, config));

此行freezes该对象，表示您无法重新分配其任何属性：

  

Object.freeze（）方法冻结一个对象：即阻止向其添加新属性;防止删除现有属性;并防止现有属性或其可枚举性，可配置性或可写性被更改。该方法返回被冻结的对象。

如果要更改此对象的数据，则应删除Object.freeze：

export default Object.assign({}, baseConfig, config) // Or just: export default {...baseConfig, ...config}

Answer 2

您的配置对象已冻结：

export default Object.freeze(Object.assign({}, baseConfig, config));

因此您无法修改它。现在您有两个选择：

1. 移除Object.freeze
中对config.js的来电
2. 如果您无法修改config.js，请使用Object.assign()定义您自己的可变派生配置对象：

_

/* mutable-config.js */
import config from 'config'
module.exports = Object.assign({}, config)

现在，您可以在代码中使用mutable-config代替config：

import config from 'mutable-config' /* instead of from `config` */

class FooterState {
    @observable items =[];
[...]