页面渲染触发TypeError错误，咨询是否为语法或react-dom版本问题

首先直接给你结论：这不是语法错误，也和react-dom版本没有关系，是代码里的空值处理逻辑遗漏导致的运行时错误。

错误原因拆解 #

报错信息 Uncaught TypeError: Cannot read property 'account_name' of undefined 很明确：你尝试读取一个undefined对象的account_name属性。

看你的这段代码：

getWitnessName = (witnessId) => { 
  if (this.props.witnesses) { 
    return this.props.witnesses.find(el => el.account_id === witnessId).account_name; 
  } 
}

你只判断了this.props.witnesses是否存在，但忽略了一个关键情况：当witnesses数组里找不到匹配witnessId的元素时，Array.find()方法会返回undefined，这时候直接访问.account_name就会触发这个错误。

可能导致找不到匹配项的场景：

• witnessId和数组中account_id的类型不匹配（比如一个是字符串，一个是数字，全等判断失败）
• witnesses数组里确实没有对应witnessId的条目
• 组件渲染时witnesses数据还没完全加载完成（虽然数组存在，但数据不完整）

修复方案 #

你需要先判断find的返回结果是否存在，再读取属性，这里给两种常见的写法：

写法一：显式判断

getWitnessName = (witnessId) => { 
  if (this.props.witnesses) { 
    const matchedWitness = this.props.witnesses.find(el => el.account_id === witnessId);
    // 找到就返回名称，没找到返回默认值
    return matchedWitness ? matchedWitness.account_name : '未知见证人';
  }
  // 当witnesses不存在时也返回默认值
  return '未知见证人';
}

写法二：使用可选链（ES2020+支持）

如果你的项目支持ES2020及以上语法，可以用可选链操作符简化代码，自动处理空值：

getWitnessName = (witnessId) => { 
  // 可选链会在遇到undefined/null时停止访问，最后用||设置默认值
  return this.props.witnesses?.find(el => el.account_id === witnessId)?.account_name || '未知见证人';
}

再确认你的疑问 #

1. 是不是语法错误？
   不是，你的代码语法完全合法，这是运行时错误，是业务逻辑里没处理空值导致的。
2. 是不是react-dom版本导致？
   和react-dom版本无关，这个错误是JavaScript本身的空值访问问题，和React框架版本没有关系。

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