React中将state作为数组索引访问元素时触发undefined报错如何解决？

问题核心原因 #

1. 通过e.target.dataset.id获取到的值是字符串类型，而数组索引要求是数字类型，比如你拿到的是字符串"1"而非数字1，直接作为索引访问数组无法匹配到对应元素。
2. id的初始值为undefined，Popup组件首次渲染时会直接执行WorkData[undefined]，返回结果为undefined，访问undefined的title属性就会触发报错。

解决步骤 #

1. 存储id时转换为数字类型 #

修改togglePopup函数中的赋值逻辑，把字符串id转为数字后再存入state：

const togglePopup = (e) => {
  setIsOpen(!isOpen);
  setId(Number(e.target.dataset.id));
};

2. 增加空值容错逻辑 #

两种方案二选一即可，也可以同时使用提升稳定性：

• 给id设置初始默认值：

  const [id, setId] = useState(0);
  

• 在Popup组件访问数组属性时使用可选链加兜底展示：

  <span className='popup-title'>
    {/* 可选链避免空值报错，空值时展示兜底文本 */}
    {WorkData?.[id]?.title ?? '内容加载中'}
    {id}
  </span>
  

可选优化：更稳妥的取值方式 #

如果后续可能调整WorkData的数组顺序，建议不要直接把id作为数组索引访问，改用find方法匹配对应id的元素，避免顺序调整后索引和id不匹配的问题：

const currentWork = WorkData.find(item => item.id === id);
// 之后访问currentWork?.title即可

额外排查点 #

如果修改后还是报错，确认WorkData的导入逻辑是否正确，检查导出是否为export default、导入路径是否拼写正确。

内容的提问来源于stack exchange，提问作者Jérôme BORGA