Reactjs 表达式大小超过Google AMP状态下的最大值

我必须在不同的标签上计算一个成本范围。 我正在根据用例更新每个单选按钮上的GoogleAmp状态

// data from mockapi
const costData = [
    {
        "label": "Treatment 1",
        "cost": "20,000 - 30,000"
    },
    {
        "label": "Treatment 2",
        "cost": "10,000 - 20,000"
    },
    {
        "label": "Treatment 3",
        "cost": "10,000 - 20,000"
    },
    .....
    .....
    .....
]


// component
const TreatmentLabels = (props) => {
    const costArr = cost.cost.split("-");
    const lowCost = parseInt(costArr[0].replace(",", "").trim());
    const highCost = parseInt(costArr[1].replace(",", "").trim());

    return costData.map((costObj) => {
        <span on={`tap:AMP.setState(
                { totalEstimatedCostRange: {
                  low: totalEstimatedCostRange.low == undefined
                        ? (selectedChoice.subtype == 'type_1'
                            ? 79000
                            : selectedChoice.subtype == 'type_2'
                              ? 96000
                              : 126000
                            ) + totalEstimatedCostRange.low + ${lowCost}
                        : labelWithSelect == '${cost.label}'
                          ? totalEstimatedCostRange.low - ${lowCost}
                          : totalEstimatedCostRange.low + ${lowCost},
                  high: totalEstimatedCostRange.high == undefined
                        ? (selectedChoice.subtype == 'type_1'
                            ? 115000
                            : selectedChoice.subtype == 'type_2'
                              ? 140000
                              : 190000
                            ) + totalEstimatedCostRange.high + ${highCost}
                        : labelWithSelect == '${cost.label}'
                          ? totalEstimatedCostRange.high - ${highCost}
                          : totalEstimatedCostRange.high + ${highCost},
                },
                labelWithSelect: labelWithSelect['${cost.label}'] == undefined ? true : !labelWithSelect['${cost.label}']
              })
              }`>
            {costObj.label}
        </span>

        <p>
            ₹{" "}
            <span data-amp-bind-text="totalEstimatedCostRange.low == undefined
                                      ? selectedChoice.subtype == 'type_1'
                                          ? 79000 
                                          : selectedChoice.subtype == 'type_2'
                                              ? 96000
                                              : 126000
                                      : totalEstimatedCostRange.low"></span>
            -{" "}
             <span data-amp-bind-text="totalEstimatedCostRange.high == undefined
                                       ? selectedChoice.subtype == 'type_1'
                                           ? 115000
                                           : selectedChoice.subtype == 'type_2'
                                               ? 140000
                                               : 190000
                                       : totalEstimatedCostRange.high"></span>
        </p>
    });
}

//来自mockapi的数据
常数成本数据=[
{
“标签”：“治疗1”，
“成本”：“20000-30000”
},
{
“标签”：“治疗2”，
“成本”：“10000-20000”
},
{
“标签”：“治疗3”，
“成本”：“10000-20000”
},
.....
.....
.....
]
//组成部分
常量处理标签=（道具）=>{
const costArr=成本成本拆分（“-”）；
const lowCost=parseInt（costArr[0]。替换（“，”，”）.trim（）；
const highCost=parseInt（costArr[1]。替换（“，”，”）.trim（）；
返回costData.map（（costObj）=>{
{costObj.label}

₹{" "}
-{" "}

});
}

但在标签点击上，Console显示表达式大小超出错误

我在这里做错了什么，或者我如何解决这个错误。 任何帮助将不胜感激，因为，我正试图解决这个问题，因为过去2天

---

提前感谢

对

amp-script

有几个限制：目标DOM对象、脚本大小和脚本运行时。看起来您已超过脚本大小。如果你最小化会发生什么？@JayGray，最小化不会带来任何效果。如果你剥离功能（仅用于测试目的），你能让它工作吗？或者，减少物品的数量以减小尺寸？另一个想法是使用

fetch

来获取数据，而不是使用内联结构<代码>获取端点必须是HTTPS和CORS。AMP文档中有一个

fetch

示例。除了错误消息中标记的大小问题外，我看不到代码有任何其他问题。在

amp script

上有几个限制：目标DOM对象、脚本大小和脚本运行时。看起来您已超过脚本大小。如果你最小化会发生什么？@JayGray，最小化不会带来任何效果。如果你剥离功能（仅用于测试目的），你能让它工作吗？或者，减少物品的数量以减小尺寸？另一个想法是使用

fetch

来获取数据，而不是使用内联结构<代码>获取端点必须是HTTPS和CORS。AMP文档中有一个

fetch

示例。除了错误消息中标记的大小问题外，我看不到代码有任何其他问题。