React fetch API 不会显示任何数据答案

【问题标题】：React fetch API won't show any dataReact fetch API 不会显示任何数据
【发布时间】：2021-04-09 19:00:59
【问题描述】：

我正在我的 react 本机移动应用程序中创建提供程序，当我尝试获取 API 并将数据设置为状态时，响应的数据未定义或为空。我不知道出了什么问题。首先它现在不再工作了。

谁能告诉我出了什么问题？这是我的代码：

const {useState, useEffect} = React;

const DataApiContext = React.createContext(null);

function DataApiProvider({children}) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://data.rivm.nl/covid-19/COVID-19_uitgevoerde_testen.json')
      .then((response) => response.json())
      .then(response => setData(response))
      .catch((error) => console.error(error));
  }, []);

  console.log(data)

  return (
    <DataApiContext.Provider value={{data}}>
      {children}
    </DataApiContext.Provider>
  )
}

ReactDOM.render(<DataApiProvider />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【问题讨论】：

你确定有问题吗？我刚刚运行了这段代码，它起作用了。加载数据可能需要 30 秒，但确实有效。
对我来说它表明数据仍然为空
我已将您的问题更新为一个运行示例。除了创建上下文和 console.log 之外，它保持不变。如果您运行它并等待足够长的时间，它确实可以工作（您可能会看到一些关于无响应页面的对话框，请选择等待）。
哦，是的，我看到数据死了，但我不知道我的应用程序内部出了什么问题。因为在 fetch 中使用 setData(data) 时数据值保持为空
回答这个问题，我认为我们需要更多的上下文。你在哪里看到null？它是DataApiProvider 组件的子组件吗？

标签： javascript reactjs api fetch

【解决方案1】：

你应该像对象一样传递值对象。

<DataApiContext.Provider value={data}>
    {children}
</DataApiContext.Provider>

【讨论】：