我有一个应用程序，可以在 html 页面上呈现多个根。每个根在网站上呈现不同（或可能相同）的页面或组件。该应用程序包含一个 redux 存储，因为每个根共享相同的应用程序。为了避免冲突，为每个根生成一个 redux 存储。
现在，redux 存储有惰性加载缩减器。当代码分割组件加载时，Reducer 就会被添加。
为了适应这种情况，存储中添加了一个函数来调用 redux 中的 ReplaceReducer。
因此，当加载组件并且还需要加载减速器时就会出现问题。该组件需要从 redux 提供者访问根存储。
这是使用旧的 React context api 中的 contextTypes 来访问存储来实现的。包装器组件中的 contextTypes 会拉取存储的当前根实例。
但是使用新的react context api，这似乎不兼容。建议创建一个上下文文件并在任何子组件中使用它。为此，我需要将存储放入反应上下文提供程序值中。但这样做意味着反应上下文将只保存 1 个存储实例。
如何才能使其像旧的 React contextTypes 一样工作以相应地访问根级别提供程序上下文？
我正在使用 React cytoscape 库。尝试集成到 cytoscape 的 popper 插件。popper“content”属性期望返回一个 div 元素，描述附加到“body”元素的 popper。由于上下文提供者位于根元素下，因此该 div 不能成为该上下文的使用者。如何在根外部定义的 popper 元素中使用相同的上下文。
使用 cytoscape 的 React 组件，但 cytoscape 的插件是纯 js 的。
<body>
<div id=root>
<Style_Provider>
.
.
.
</Style_Provider>
</div>
<div id="popper">
// need to access to style context
</div>
</body>
由于一个新问题，重新发布了一个与我上次类似的问题。我正在尝试使用带有钩子的上下文来管理我的 React 应用程序中的身份验证。我收到错误TypeError: Cannot destructure property 'isAuthenticated' of 'Object(...)(...)' as it is undefined.，但是当我console.log定义它的属性时，我看false不到undefined。
我有上下文定义和提供者 authContext.js
import React, { useState, useEffect, createContext } from "react";
import axios from "axios";
const AuthContext = createContext();
export { AuthContext };
const AuthContextProvider = (props) => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const setAuth = (boolean) => {
setIsAuthenticated(boolean);
};
const apiOptions = {
url: "users/is-verified",
method: "GET",
headers: {
token: localStorage.token,
},
};
function isAuth() { …提前感谢您帮助解决这个问题。
我正在从事一个公司的项目，该项目将限制我将所有代码都放在这里，但我会尝试在不泄露国家机密的情况下尽可能多地放置相关代码。
基本上，React Native 应用程序使用的是 React Navigation v5，我已经尝试解决这个问题两天了。我明白发生了什么，但我不明白为什么会发生或如何解决它。
在应用程序代码中的某处，您有以下代码。
export const Lounge = function Lounge(props: {navigation: any}) {
const {navigation: {setOptions}} = props
const bottomTabBarCtx = useContext(BottomTabBarContext)
// const [routeName, setRouteName] = useState("LoungeList")
useEffect(() => {
setOptions({tabBarVisible: bottomTabBarCtx.isVisible})
}, [bottomTabBarCtx.isVisible, setOptions])
return <Stack.Navigator initialRouteName={"LoungeList"}>
<Stack.Screen
name="LoungeList"
component={List}
options={{headerShown: false}}
/>
<Stack.Screen
name="LoungeDetails"
component={Details}
options={{
headerLeft : buttonProps => <BackButton {...buttonProps} />,
headerRight: buttonProps => <LoungeHeaderRightDetailsButton {...buttonProps} />,
headerTitle: 'Lounge Details',
}}
/>
<Stack.Screen
name="LoungeParticipants"
component={Participants}
options={{
headerLeft : buttonProps …reactjs react-native react-navigation react-context react-navigation-v5
我试图传递一个user对象作为我的 React 的值，Context.Provider如<UserContext.Provider value={user} />. 然而，React 不喜欢将对象作为子对象传递的想法。这是我收到的错误消息：
错误：对象作为 React 子对象无效（找到：带有键 {id、用户名、名字、姓氏、电子邮件、头像}的对象）。如果您打算渲染子集合，请改用数组。
我希望有人能提供帮助。这是我的 React 组件，所有这些都发生在其中：
class MyApp extends App {
constructor(props) {
super(props);
this.state = {
user: {},
authenticating: false,
};
}
logout = () => {
...
};
render() {
const { Component, pageProps } = this.props;
const user = {
user: this.state.user,
logout: this.logout,
};
return (
<>
{!this.state.authenticating && (
<UserContext.Provider value={user}>
<Navbar />
<Component {...pageProps} />
</UserContext.Provider>
)}
</>
);
} …我是一名有角度的开发人员多年，我尝试使用 React 和 React Native 来切换我的一些新项目，但我很难决定哪种状态管理更适合一个可能变得更大的项目，我的问题如果我可以通过将 Redux 作为中央存储和 Context API 来使用这两种解决方案来更好地管理以将 props 传递给嵌套组件，那么使用这两种解决方案是一个很好的模式还是我应该坚持其中一种。
遵循这篇博文中解释的 Kent C Dodds 的提供者模式，我有一个上下文提供者组件以及一个使用该上下文的钩子。
钩子防止在提供者之外使用它，
export function useUser() {
const { user } = useContext(UserContext) || {};
const { switchUser } = useContext(SwitchUserContext) || {};
if (!user || !switchUser) {
throw new Error('Cannot use `useUser` outside of `UserProvider`');
}
return { user, switchUser };
}
为了测试场景，我创建了一个TestComponent并在其中使用了useUser钩子。
function TestComponent() {
const { user, switchUser } = useUser();
return (
<>
<p>User: {user.name}</p>
<button onClick={switchUser}>Switch user</button>
</>
);
}
我是这样测试的
test('should throw error when not …useEffect(()=>{
history.push("/home")
},[token, history])
即这里令牌不是 的一部分useEffect，但我想将其添加为 的依赖项useEffect。我可以这样做吗？如果不是那么为什么？
如何将 React 上下文中的内容传递到 Redux Saga 函数中？
我有一个上下文值，我可以使用类似这样的内容在反应组件中检索它
const { connectionObject } = useMyContext();
这将使我能够connectionObject从上下文中获取实例。
但是，我还在应用程序的其他部分使用 redux saga。这些 redux sagas 之一需要使用personObjectfrom 上下文。
由于 Redux-Sagas 在技术上只是常规生成器函数本身，因此我无法使用useMyContext()它来检索connectionObject. 例如，这行不通
export function* saveData() {
const { connectionObject } = useMyContext(); // This will not work
yield performSaveSomething(connectionObject);
}
Redux Saga 是由我从 React 组件内调度 redux 操作触发的。当然，一种可能的解决方法是从反应组件中的上下文中获取connectionObject，然后将操作作为有效connectionObject负载的一部分进行分派，然后将其传递给传奇。但这感觉完全是反模式，而且并不优雅，特别是当有效负载应该更新到状态但在这种情况下仅用于传递给传奇时。这是一个例子来说明这种尴尬：
// In the React component
export const myReactComponent = (props) => {
const { connectionObject } = useMyContext(); …我正在使用 Next.js 13 和 Supabase 为后端构建一个应用程序，并且我一直致力于找出为当前登录用户创建上下文/提供程序的最佳/正确方法。
从 Supabase 检索用户的流程是这样的：
我的布局中有一个 supabase 侦听器，用于侦听身份验证状态更改，并且非常适合设置和刷新当前会话。我最初的方法是从 onAuthState 更改钩子中添加 fetchUser 调用，但是我遇到了更新水合错误。
直接取自示例，该应用程序的外观如下：
// layout.tsx
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const supabase = createServerComponentSupabaseClient<Database>({
headers,
cookies,
});
const {
data: { session },
} = await supabase.auth.getSession();
return (
<html>
<head />
<body>
<NavMenu session={session} />
<SupabaseListener accessToken={session?.access_token} />
{children}
</body>
</html>
);
} …react-context ×10
reactjs ×10
javascript ×5
redux ×3
react-native ×2
react-redux ×2
cytoscape.js ×1
frontend ×1
jestjs ×1
next.js ×1
next.js13 ×1
popper.js ×1
react-hooks ×1
redux-saga ×1
supabase ×1
use-effect ×1
use-state ×1