React调用DND5E API时Monk类渲染Input报错求助

问题分析 #

你遇到的情况是：React中遍历DND5E API返回的职业熟练度选择数据时，所有职业都正常渲染，唯独Monk类在嵌套map的input元素name属性处报错，但外部直接打印对应路径的值正常，且console.log(option.item.name)也能正常输出。

可能原因与解决方案 #

1. 排查异常数据，添加完整性校验

虽然你确认Monk的API结构与其他职业一致，但可能其options数组中存在某个元素的item属性为undefined或null（你仅验证了第一个元素，未覆盖全部选项）。在嵌套map中添加校验逻辑，定位问题：

{element.from.options.map((option, idx) => {
  // 捕获异常数据并打印
  if (!option?.item) {
    console.warn('发现无效选项:', option);
    return null;
  }

  return(
    <p key={idx}>
      {console.log(option.item.name)}
      <input 
        onChange={(e) => handleCheck(e, element, option)} 
        type='checkbox' 
        name={option.item.index} 
      />
      <label htmlFor={option.item.index}>{option.item.name}</label>
    </p>
  )
})}

2. 给列表元素添加唯一Key属性

React要求列表渲染必须提供唯一key属性，缺失可能引发渲染异常（属于必做的最佳实践）：

• 优先用option.item.index作为key（index是API返回的唯一标识）：

<p key={option.item.index}>
  {/* ... 其余代码 ... */}
</p>

• 若index存在重复风险，可临时使用数组索引idx作为key。

3. 用可选链操作符保护属性访问

即使数据存在异常，通过可选链（?.）可以避免因属性缺失导致的报错，同时保证页面正常渲染：

<input 
  onChange={(e) => handleCheck(e, element, option)} 
  type='checkbox' 
  name={option?.item?.index || ''} 
/>
<label htmlFor={option?.item?.index || ''}>
  {option?.item?.name || '未知选项'}
</label>

4. 重新验证Monk的API返回数据

再次核对Monk职业的proficiency_choices数据，确认所有options元素的item都包含index和name属性——虽然API文档显示结构一致，但实际返回可能存在特殊情况（比如某个选项的item是字符串而非对象）。

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