React：在JSON配置中调用函数获取返回值而非函数字符串的问题

问题原因 #

你的代码存在两处问题：

1. 你给typeDetails字段赋值的是未执行的函数本身，序列化对象时只会输出函数的字符串内容，不会拿到函数执行结果。
2. 你写的匿名函数内部调用config()时既没有传入参数，也没有返回config的执行结果，就算手动调用这个函数也拿不到预期值。

解决方案 #

方案1：对象定义时直接执行函数赋值 #

如果你不需要后续动态更新typeDetails的取值，直接在定义对象时调用config函数传入参数，把返回值直接赋值给typeDetails即可：

// 可以先把type值抽成变量避免重复写
const currentType = "A"
var jsonFormat = {
  name: "May",
  type: currentType,
  typeDetails: config(currentType)
};

方案2：用getter实现动态取值 #

如果你需要后续修改type字段时，typeDetails自动同步更新为对应配置，可以把typeDetails定义为getter属性：

var jsonFormat = {
  name: "May",
  type: "A",
  // 定义getter，每次访问typeDetails时都会自动调用config拿最新结果
  get typeDetails() {
    return config(this.type)
  }
};

后续修改jsonFormat.type = "B"时，访问jsonFormat.typeDetails就会自动返回B对应的配置，无需手动重新赋值。

两种方案最终输出的jsonFormat都符合你要求的格式：

{
  name: "May",
  type: "A",
  typeDetails: {
    a: {
      a1: 1234,
      a2: 4567
    }
  }
}

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