React JS中访问holdingsByAccount prop的JSX未渲染且无报错

核心问题点 #

• 方法缺失返回值：getHoldingsForAccount方法内调用this.props.holdingsByAccount.map(...)生成JSX片段后，没有把map的遍历结果作为方法的返回值向外抛出，整个方法隐式返回undefined，JSX模板中调用该方法的位置获取不到任何可渲染内容，且该问题不会触发控制台报错。
• 数据匹配逻辑偏差：原代码的遍历逻辑不符合holdingsByAccount的常规数据结构设计——遍历每一条持仓数据后，直接从单条持仓对象上读取和传入账户ID同名的属性值，哪怕修正了返回值问题，也无法正确匹配到对应账户的持仓数据。
• 缺少空值防护：没有对持仓数据的加载状态做判断，数据未就绪时直接访问属性会出现隐形的取值失败，同样不会触发明显的控制台报错。

修正实现 #

调整getHoldingsForAccount方法，补齐返回逻辑、修正匹配规则、增加空值判断：

getHoldingsForAccount = (accountId) => {
  const { holdingsByAccount } = this.props;
  // 持仓数据未加载完成时返回空，避免异常
  if (!Array.isArray(holdingsByAccount)) return null;

  // 匹配当前账户对应的持仓条目
  const matchedHolding = holdingsByAccount.find(
    item => item.accountId === accountId
  );

  return matchedHolding ? <span>{matchedHolding.value}</span> : null;
}

若你的holdingsByAccount实际是「账户ID为键、对应持仓值为键值」的对象结构（而非数组），可直接将取值逻辑简化为：

const holdingValue = holdingsByAccount?.[accountId]?.value;
return holdingValue ? <span>{holdingValue}</span> : null;

完成上述调整后，对应持仓内容即可正常渲染到页面上。

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