问题标签 [use-context]

我正在尝试使用来自 API 的响应来更新表。响应来自一个组件，而表格位于另一个组件中。我可以看到我成功地更新了组件中的上下文，但它似乎没有传递给其他人。我尝试更新上下文，然后通过道具钻孔传递它，但这也不起作用。如何获取包含表以侦听上下文更改的组件？我的组件的代码如下：

更新上下文的组件：

根组件：

我试图将其传递给的组件（此处的布局仍在进行中）：

重申我的问题，如何让 resultCard 监听 AssetContext 的变化？

谢谢

我正在使用 Spotify Web API 为使用 Node Express 作为服务器的简单 React 应用程序实现授权代码流，并且无法弄清楚如何将身份验证凭据从服务器传递到客户端。

我正在使用 React 的 useContext 挂钩来存储授权凭据。

在 index.js 中，我将我的应用程序包装在 AuthProvider 中

在应用程序中，我使用 react-router-dom 来管理路由和受保护的路由。

在 PrivateRoute 内部，我允许根据身份验证上下文中的内容访问路由。

当用户进入主页时，他们会被重定向到登录屏幕。在那里，一个链接将用户重定向到 /api/login。/api 路由被代理到节点服务器，并且 /api/login 启动 spotify 授权调用。用户被定向到 Spotify 登录，输入他们的信息，我最终得到一个访问令牌和刷新令牌。这一切都有效。

使用访问令牌和刷新令牌，我可以将用户重定向到带有这些参数（例如/#/user/${access_token}/${refresh_token}）的 URL，但我不知道如何将这些参数放入我的授权上下文中。请注意，从 URL 获取令牌不是问题。

我试图做的是向我的 PrivateRoute 添加一个 useEffect ，它从 URL 获取参数，然后在找到它们时更新授权上下文。

然而，这会使事情陷入无限循环。我似乎只能在由 onClick 事件触发时成功使用 setAuthData 。我应该如何拦截来自我的 api 路由器的重定向，以便我可以更新授权上下文中的数据，然后转到 PrivateRoute？

或者，有没有一种方法可以将我的所有 api 路由器逻辑封装在 onClick 事件中并从中获取最终响应（例如fetch("/api/login")....user gets redirected, fills in info, exchange code for tokens, send tokens back as response...then((response) => setAuthData(response)...）？

我当前的上下文以及设置更新上下文的方法如下所示：

我在一个组件中设置了新的上下文，如下所示：

但我更愿意 setAppContext((currentContext) => ({...currentContext, accountId: accountId}))像我们在useReducer钩子上做的那样做useReducer(state => state.item)。这可能吗，如果可以，我该怎么写？

我想了解 react-redux，但我完全不知道为什么组件没有更新。我认为没有任何更新，因为 react 没有考虑上下文变化的深度。但即使有这些想法我也不知道该怎么办请帮助我我累了

我认为错误在这里的某个地方

应用程序

我正在尝试在我的计数器示例中使用context api或使用。实际上， 我使用.On 按钮单击我的值我想要计数器值？但我无法做到这一点。useContextinitialize0increase

这是我的代码 https://codesandbox.io/s/happy-spence-qbmps?file=/src/context.js

我举了一个例子，user增加计数器以显示类似于增加和减少计数器的加载器。

但我做错了什么

你能告诉我如何在context不使用的情况下使用 api增加和减少计数器值吗redux

我也看过这个教程

https://medium.com/@seantheurgel/react-hooks-as-state-management-usecontext-useeffect-usereducer-a75472a862fe 但下面的codepen不起作用？

更新：问题直接在reducer中，与onClick函数和deleteLastItem函数无关。我用console.logs对此进行了测试，显然唯一重复两次的是直接在reducer中的那个。

我同时测试了钩子 useReducer 和 useContext ，因为我认为它们可以很好地协同工作，但显然，当我将一个函数设置为 onClick 函数时，它会被触发两次，而且它不是因为我'正在删除数组中的最后一项，因此它删除了两项而不是一项。

这是存储上下文和 reducer 挂钩的文件：

如您所见，console.log("hey"), 告诉我它被执行了两次（除了看到屏幕中的项目一次被清除两次）

这是引入上下文以及出现问题的组件：

最后，这里是 app.js，我认为它没有用，但以防万一：

React 中的 context 和 reducer 非常新。我目前正在尝试使用 Context 从折线图上的事件中获取日期字符串。我使用的折线图来自 react-chartjs-2。

我的上下文已设置并提供如下：

然后提供程序设置如下：

然后我的折线图组件通过以下方式导入上下文：

但是我得到以下信息： TypeError: dispatch is not a function

对此的任何帮助将不胜感激。

我正在尝试使用钩子将 redux 存储替换为 action 和 reducer 我使用 createContext 创建了一个全局存储，并使用 useReducer 创建了一个全局 reducer，并尝试在下面的文件中使用全局状态对象和 useContext，这会引发错误。另外，我尝试过控制台记录其返回值useContext(Store)未定义。

index.jsx:7 Uncaught TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) at Home (index.jsx:7) at renderWithHooks (react-dom.development.js:14803)在线获取错误const [appStore, dispatch] = useContext(Store)

我的App.js

我的商店/index.js

contextProvider.js

combineReducer.js

主页/reducer.js

如下图所示，我有一个基本的反应上下文设置。

我的愿望是消耗上下文的子组件应该只在上下文数据更改时重新渲染，但我发现情况并非如此。

如果我更新与上下文无关的 call setData2，则会触发状态更新Container，随后会触发重新计算并导致消费子更新。

有问题的子组件已经在使用React.memo，所以它只会在它的useContext钩子导致它时更新。但是上下文会在更新时Container更新，即使没有data1改变。

有可能解决这个问题吗？

我正在尝试构建我的网站的一部分，该部分将动态地从 REST API 中提取联系信息。此时我正在使用来自https://jsonplaceholder.typicode.com的示例 API 。

我正在尝试使用axios，特别是useAxiosandmakeUseAxios钩子来获取 API，并将其存储在应用程序上下文中，然后我可以在整个站点中使用，最好是使用useContext钩子。此外，我需要能够根据用户交互更新 API 调用，允许他们选择位置、更新 API 并将其存储在应用程序的上下文中，以便动态更新。

从本质上讲，我已经获得了一个useContext基于本教程的基本场景，但我正在努力解决如何以可以引用它的方式存储 JSON 响应useContext。这是迄今为止我做过的最接近的事情：

AppContext.tsx

还有我的标头组件，我正在尝试访问它：

我需要的是按钮header__utility动态显示所选经销商的姓名和电话号码。我可以根据需要澄清任何事情，我对 React 很陌生，并且仍在学习如何表达我所需要的一切。

谢谢！