使用 React Context 从 api 获取数据时获取“null”答案

【问题标题】：Gettin 'null' while fetching data from api with React Context使用 React Context 从 api 获取数据时获取“null”
【发布时间】：2021-11-11 15:33:14
【问题描述】：

我试图在 React 中使用 axios 和 useContext 钩子从 API 获取一堆文章，但得到“null”作为响应。这是“状态”文件中的代码

import React, { useReducer } from "react";
import axios from "axios";
import ArticleContext from "./articleContext";
import articleReducer from "./articleReducer";
import { GET_ARTICLE } from "../types";

const ArticleState = (props) => {
  const initialState = {
    article: null,
  };

  const [state, dispatch] = useReducer(articleReducer, initialState);

  const getArticle = async (id) => {
    try {
      const res = await axios.get(`/articles/${id}`);
      dispatch({ type: GET_ARTICLE, payload: res.data });
    } catch (err) {
      console.log("errrrr");
    }
  };

  return (
    <ArticleContext.Provider
      value={{
        article: state.article,
        getArticle,
      }}
    >
      {props.children}
    </ArticleContext.Provider>
  );
};
export default ArticleState;

这是来自“Reducer”的代码

import { GET_ARTICLE } from "../types";
// eslint-disable-next-line import/no-anonymous-default-export
export default (state, action) => {
  switch (action.type) {
    case GET_ARTICLE:
      return {
        ...state,
        article: action.payload,
      };
    default:
      return state;
  }
};

最后是来自组件的代码，我试图从 api 调用响应中呈现数据并得到 TypeError: article is null 我在这里遗漏了什么吗？主 App 组件也包裹在 <ArticleState></ArticleState> 中。

import React, { useEffect, useContext } from "react";
import ArticleContext from "../../context/article/articleContext";

const Article = () => {
  const articleContext = useContext(ArticleContext);
  const { article, getArticle } = articleContext;
  useEffect(() => {
    getArticle();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

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

export default Article;

【问题讨论】：

标签： reactjs react-hooks use-context use-reducer

【解决方案1】：

您应该在显示文章数据之前检查文章是否已设置。
在渲染文章信息之前给组件添加条件：

const Article = () => {
  const articleContext = useContext(ArticleContext);
  const { article, getArticle } = articleContext;

  useEffect(() => {
    getArticle();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (!article) {
      return <>Loading article...</>
  }

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

【讨论】：