react动态渲染label value对象时候 value是一个动态的值 使用箭头函数() =>{} map渲染发现函数未被计算

37 阅读1分钟

总结:问题在于渲染的地方没有调用函数,而是直接使用了函数引用。解决方法是在渲染时调用函数,或者在构建数组时计算出值(而不是函数)。 value: () => { ... } // 这是一个函数定义,不是函数调用

  1. 解决方法1
    <span>
      {typeof item.value === 'function' 
        ? item.value() // 执行函数获取返回值
        : item.value}
    </span>
  1. 解决方法2
const orderPriceServiceInfo = [
  ...,
  {
    label: i18n.t('name', '服务明细'),
    value: (() => { 
      try {
        // ...原函数逻辑
        return result; // 直接返回计算值
      } catch (e) {
        return '-';
      }
    })() // 立即执行
  },
  ...
];