ReactJS报错TypeError: obj未定义，求新手友好的修复方案

1. 先排查 props 传递是否正确 #

• 检查 ArticleList.js 里给 ArticleDetail 传参的代码，确认obj这个属性名没拼错，且传递的数据源没问题：

  // ArticleList.js 示例写法
  {articles.map(article => (
    <ArticleDetail key={article.id} obj={article} />
  ))}
  

• 在 ArticleDetail.js 开头打印 props，确认是否真的拿到了obj：

  // ArticleDetail.js
  console.log('当前接收的props:', props);
  

  如果打印结果里obj是undefined，要么是articles数组里有无效项，要么是传参时属性名写错了，回去修正即可。

2. 处理异步加载的空数据场景 #

如果obj是接口请求的异步数据，组件渲染时数据还没返回就会出现undefined，这时候加条件渲染兜底：

• 父组件ArticleList里先判断数据是否存在：

  // ArticleList.js
  if (!articles) return <div>加载中...</div>;
  
  return (
    <div>
      {articles.map(article => <ArticleDetail obj={article} key={article.id} />)}
    </div>
  );
  

• 子组件ArticleDetail里也可以加判断，避免直接访问undefined的属性：

  // ArticleDetail.js
  const { obj } = props;
  if (!obj) return null; // 或者显示加载提示
  
  return (
    <div>
      <h1>{obj.title}</h1>
      <p>{obj.content}</p>
    </div>
  );
  

3. 用可选链操作符快速兜底 #

不想写太多条件判断的话，用ES6的?.可选链操作符，访问属性时自动规避undefined报错：

// ArticleDetail.js
return (
  <div>
    <h1>{obj?.title}</h1>
    <p>{obj?.content}</p>
  </div>
);

4. 设置默认props兜底 #

在ArticleDetail里给obj设置默认值，确保即使没传参也不会报错：

// ArticleDetail.js 类组件写法
ArticleDetail.defaultProps = {
  obj: {}
};

// 函数组件写法
const ArticleDetail = ({ obj = {} }) => {
  // 组件逻辑
};

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