React应用报TypeError: Cannot read properties of undefined (reading '0') 如何解决

你遇到的TypeError: Cannot read properties of undefined (reading '0')报错，核心原因是index.js中导入的robots变量为undefined，代码尝试访问robots[0]时触发了异常。

• 确认robots.js文件的存放路径：你当前的导入语句为import {robots} from './robots'，要求robots.js必须和index.js存放在同一级目录下（默认是都放在src文件夹内），如果存放位置错误，就会导致导入失败，robots变量为undefined。
• 核对robots.js的导出语法：你当前在robots.js中用的是命名导出export const robots = [...]，和index.js中的命名导入语法是匹配的，如果你后续修改过导出语句为export default robots，就需要把导入语句同步改成import robots from './robots'，否则会导入失败。
• 清除缓存重启服务：如果路径和导出语法都没问题，大概率是webpack缓存导致新文件没有被正确识别，停止当前的本地开发服务，重新执行npm start重启即可。
• 可选优化：可以增加空值判断避免异常崩溃，修改index.js的渲染逻辑如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Card from './Card';
import reportWebVitals from './reportWebVitals';
import 'tachyons';
import {robots}  from './robots';

// 增加空值判断
if (!robots || !Array.isArray(robots) || robots.length < 3) {
  ReactDOM.render(<div>数据加载中，请稍后</div>, document.getElementById('root'));
} else {
  ReactDOM.render(
    <div>
      <Card id={robots[0].id} name={robots[0].name} email={robots[0].email}/>
      <Card id={robots[1].id} name={robots[1].name} email={robots[1].email}/>
      <Card id={robots[2].id} name={robots[2].name} email={robots[2].email}/>
    </div>,
    document.getElementById('root')
  );
}

reportWebVitals();

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