React中随机索引打印数组项报TypeError错误如何解决

报错Uncaught TypeError: Cannot read properties of undefined (reading 'results')和你的随机索引逻辑没有任何关系，核心问题是代码执行到取值语句时，characters.data的值是undefined。
你觉得固定索引[2]能正常运行只是巧合：你测试固定索引的那次渲染，异步加载的characters数据刚好已经返回并更新到状态里了；但React组件首次渲染时，如果你是通过接口请求获取characters数据，初始状态下characters要么是空对象、要么是null，根本没有data字段，这时候不管你取哪个索引，直接链式读.data.results都会报错。
另外注意你贴的两段出错代码里，第一段写的是大写开头的Characters.data.results，第二段是小写开头的characters.data.results，JS变量大小写敏感，如果变量名写错也会直接触发这个报错，先排查这个低级问题。

• 先统一变量名
  确保所有位置引用的状态变量名大小写完全一致，不要出现Characters和characters混用的情况。
• 加安全访问逻辑适配异步渲染
  异步数据场景下必须做兜底判断，避免首次渲染时数据不存在报错，用可选链操作符写法最简单：

// 索引计算不要写死长度21，直接用数组实际长度，避免索引越界
const randomIndex = characters?.data?.results?.length 
  ? Math.floor(Math.random() * characters.data.results.length) 
  : 0;
// 安全取值，数据未加载完成时兜底为null
const randomCharacter = characters?.data?.results?.[randomIndex] ?? null;

console.log(randomCharacter);

• （可选）等数据加载完成后再执行取值逻辑
  如果不想在渲染阶段处理空值，可以加判断，等characters.data.results存在之后再做随机计算：

if (characters?.data?.results?.length) {
  const randomIndex = Math.floor(Math.random() * characters.data.results.length);
  console.log(characters.data.results[randomIndex]);
}

你抽离的只是索引值的计算逻辑，根本没有解决「取值链路中characters.data不存在」的核心问题，不管你把索引写死、内联计算还是抽成独立变量，只要链式取值的路径上有undefined，都会抛出完全相同的错误。

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