基于JSON渲染表格时JSX内filter+hasOwnProperty取值返回空问题

数据老陈

2026-10-26

核心问题定位

代码逻辑存在关键错位，直接导致渲染值为空白：

对filter方法的返回值取值方式完全错误
Array.filter()执行后返回的是符合条件的元素组成的新数组，而非匹配到的对象本身。你当前的写法是直接对这个新数组，用cost.key这个字符串作为属性索引取值——数组本身不存在cost.key对应的自定义属性，最终取到的是undefined，页面自然渲染为空。
举个直观的例子：假设cost.key值为'baseCost'，匹配到的数组元素是{baseCost: 120}，那filter执行后返回的是[{baseCost: 120}]，后续读取数组['baseCost']的结果永远是undefined，和你想取的120完全不相关。
缺少必要的运行时兜底
如果x.amountForQuantity本身不是数组（是普通对象/为undefined），直接调用filter方法会触发运行时报错，React渲染中断后也会输出空白内容。

修正写法

如果业务逻辑是从amountForQuantity数组中，找到第一个包含cost.key属性的对象，取出对应属性值展示，不需要用filter生成冗余的新数组，直接用更轻量的find方法即可，同时加上空值兜底：

<th>
  {
    x?.amountForQuantity
      ?.find((remaining) => Object.prototype.hasOwnProperty.call(remaining, cost.key))
      ?.[cost.key]
  }
</th>

如果确实需要匹配所有符合条件的项做汇总展示，可以在filter后先取出每个匹配项的对应值再拼接渲染：

<th>
  {
    x?.amountForQuantity
      ?.filter((remaining) => Object.prototype.hasOwnProperty.call(remaining, cost.key))
      .map((item) => item[cost.key])
      .join(' / ')
  }
</th>