使用React Context从API获取数据返回null且报TypeError如何解决

云原生阿岚

2026-9-26

问题原因及修复方案

1. 调用getArticle时未传入必填的id参数

你定义的getArticle方法要求传入文章id作为参数，但在渲染组件的useEffect中调用时没有传值，导致请求路径为/articles/undefined，接口无法返回正确数据，article始终保持初始的null值。

2. 未做异步请求的加载状态判断

初始状态下article就是null，组件首次渲染时会直接读取article的属性，此时异步请求还未完成，必然触发TypeError。

修复步骤

第一步：调用getArticle时传入正确的文章id，如果你是从路由参数取id，可以用useParams获取：

// 渲染组件内如果用react-router的话先引入useParams
import { useParams } from 'react-router-dom'

const Article = () => {
  const { id } = useParams() // 假设路由配置了路径为/article/:id
  const articleContext = useContext(ArticleContext);
  const { article, getArticle } = articleContext;
  useEffect(() => {
    if (id) getArticle(id); // 传入id
  }, [id, getArticle]); // 补全依赖，移除之前的eslint忽略注释

第二步：添加条件渲染，article为空时显示加载状态，避免读取null的属性：

// return部分修改
if (!article) return <div>加载中...</div>

return (
  <div className="article" key={article.id}>
    <h2 className="article__title">{article.Title}</h2>
    <p className="article__body">{article.preview}</p>
  </div>
);

可选优化：如果不想写单独的加载状态，也可以用可选链运算符规避错误：

return (
  <div className="article" key={article?.id}>
    <h2 className="article__title">{article?.Title}</h2>
    <p className="article__body">{article?.preview}</p>
  </div>
);