添加Context API的AppProvider后组件内容及上下文数据均无法显示的问题求助

各位大佬好，我最近在React项目里用Context API的时候碰到了个棘手的问题，想请教下大家怎么解决。

在我还没给index.js加上AppProvider标签的时候，项目里所有组件的JSX内容（比如各个组件里写的"hello"、"news"这类文本）都能正常在localhost页面上显示；可一旦我把AppProvider加上之后，这些组件的内容直接消失了，就连Context API里定义的字符串数据"...state"也没显示出来，页面完全没内容了。

相关组件代码（News组件） #

import React, { useEffect } from 'react'

const News = ()=> {

  let API = "https://hn.algolia.com/api/v1/search?query=html";

  const fetchApiData = async (url) => {
    try {
      const res  = await fetch(url);
      const data = await res.json();
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchApiData(API)
  })

  return (
    <div>news</div>
  )
}

export default News

相关文件截图 #

• index.js截图：
• App.js截图：
• ContextApi.js截图：
• localhost页面截图：

备注：内容来源于stack exchange，提问作者gautam purohit