使用 React Context 从 api 获取数据时开始 'null'

Question

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

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;

Answer 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>
  );
};

使用 React Context 从 api 获取数据时开始 'null'

Gettin 'null' while fetching data from api with React Context

reactjs

react-hooks

use-reducer

use-context