React Fetch 数据并通过 context API 将其保存在全局状态答案

【问题标题】：React Fetch data and save it in global state via context APIReact Fetch 数据并通过 context API 将其保存在全局状态
【发布时间】：2020-03-14 02:03:30
【问题描述】：

使用 react 上下文 api 创建全局状态并获取数据并将其保存在上下文对象中以便子组件可以访问数据是否是个好主意。或者最好在根组件中获取数据并通过 props 将其传递给子组件。

如果全局状态使用上下文 api 更好，我如何获取数据并将其保存在全局状态中，因为 fetch 函数是异步的，我一直在使用 React useEffect 来解决它。

这是我的全局状态的 sn-p

import React from "react";

const GlobalState = React.createContext(null);

const socket = 'http://localhost:5000/';

const fetch_all_users = () => {
    fetch(socket + 'get_users_data')
        .then(response => response.json())
        .then(json => {
            console.log(json)
        })
        .catch(error => {
            console.log(error);
        });
}

const fetch_all_doors = () => {
    fetch(socket + 'get_doors_data')
        .then(response => response.json())
        .then(json => {
            console.log(json)
        })
        .catch(error => {
            console.log(error);
        });
}

【问题讨论】：

如果您只是将道具传递给第一个（或者可能是第二个）孩子，我不会使用上下文，否则如果更多孩子的孩子需要此信息，将使用上下文，但这只是我的方法。
我认为，首先，您需要了解一下上下文，以及它是如何使用的！什么是提供者，什么是消费者，如何提取所说的 globalState。到目前为止你做了什么？

标签： reactjs

【解决方案1】：

您实际上可以将上下文用作全局状态，但请注意，当您获取数据时，上下文的初始数据可能为空，因此您可以显示加载屏幕。

你也可以使用useEffectHook，但我宁愿选择一个完整的组件作为上下文提供者。

还请注意，您将无法触发上下文更新。因此，如果您需要在后一种状态下更新状态，您可能需要以某种方式重新加载整个应用程序或使用 redux 或您选择的任何状态管理

【讨论】：

这是更多评论，不是答案！
不幸的是我还不能对这个问题添加评论
;) 给你一些贡献

【解决方案2】：

react-query 是一个简洁的库，用于管理从后端检索到的数据。

【讨论】：