标签: react-context

我正在尝试更新 React 上下文，并看到了这个答案。

const LanguageSwitcher = () => {
  const { language, setLanguage } = useContext(LanguageContext);
  return (
    <button onClick={() => setLanguage("jp")}>
      Switch Language (Current: {language})
    </button>
  );
};

对我来说似乎很明智，除了我得到“setLanguage 不是函数”。这个错误实际上似乎是合理的，因为 setLanguage 似乎被声明为常量。

这些“const { x, y } = z”声明如何工作？我声明了两个常量吗？如果是这样，为什么我读到的这么多例子似乎允许我将 x 视为变量而 y 视为函数？为什么我会收到此错误？

抱歉，这里是新手。感谢您的帮助。

编辑：上下文代码是：

const LanguageContext = React.createContext({
  language: "en",
  setLanguage: () => {}
});

太长了；如何在反应微前端之间使用单一上下文？

应用程序分为多个微前端或反应应用程序。其中每个都在不同的端口上运行。容器正在托管其他微前端。每个都是一个单独的反应应用程序，并且它是一个运行时集成。（我使用martinfowler示例来实现微前端）

目前通过 URL 和浏览器存储（localStorage/cookies）将一些数据传递到其他微前端。

我需要使用 React Context 在这些 React 应用程序 (MFE) 之间传递数据。

我已经在容器（ReactApp1）中定义了 ReactContext Provider 并存储了值（比如 color=black）。要在较低级别的微前端 (ReactApp2) 中访问此颜色，我们需要可从任何微前端获取上下文。如何使其可用？

（注意：我不想使用 localStorage 或 cookie 进行全局数据共享）

<Container>
  <LowerLevelMFE1/>
  <LowerLevelMFE2/>
  ...
</Container>

菜鸟在这里反应一下。

我正在尝试使用 Context、useState、useEffect 和 sessionStorage 的组合来构建一个在页面刷新时持续运行的功能全局数据存储。

当用户登录应用程序时，我会获取 API，然后setUserData当我收到响应时。

这部分效果很好，但我意识到，如果用户“刷新”他们的页面，应用程序会将userDataconst 重置为null（并且页面因此崩溃）。

我研究了一些关于使用 useEffect 和 sessionStorage 的组合来有效替换userDatasessionStorage 中当前内容的文章和视频，这似乎是处理页面刷新的明智方法。[来源： React Persist State to LocalStorage with useEffect by Ben Awad]

但是，我似乎无法让 useEffect 发挥作用。由于某种原因 useEffect 只在/路线上触发而不是在/dashboard路线上？

我希望因为 useEffect 位于 App.js 中，所以每次刷新任何路由时它都会运行（从而从 sessionStorage 检索最新数据）。

我在 App.js 中添加了一些控制台日志记录，以了解何时触发事件，并在下面包含这些日志。

我对 useEffect 的理解不正确吗？为什么它只在刷新路由时触发，而不是在刷新/页面时触发？/dashboard

应用程序.js

import { useState, createContext, useEffect } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import '../css/app.css'; …

不久，当我尝试在我的组件之一中将 useState 与 useContext 一起使用时，所有页面都消失了。UseState 出于某种原因阻止了我的路由器，我不知道为什么......你能告诉我我的错误在哪里吗？

下面的一些代码：Index.js

export default function App() {
  const [value, setValue] = useState(false)       -----> here I set the state
  return (
    <BrowserRouter>
      <UserContext.Provider value={{ value, setValue }}>
        <Routes>
          <Route path='/' element={<Layout />}>
            <Route index element={<Home />} />
            <Route path='Home' element={<Home />} />
            <Route path='Menu' element={<Menu />} />
            <Route path='Story' element={<Story />} />
            <Route path='Coffee' element={<Coffee />} />
            <Route path='Cart' element={<Cart />} />
          </Route>
        </Routes>
      </UserContext.Provider>
    </BrowserRouter>
  )
}

// ReactDOM.render(<App />, document.getElementById("root"))
const root = ReactDOM.createRoot(document.getElementById("root")) …

我有一个 React 上下文提供程序。我用JS写的，现在用TS重写。我很难让这些类型正常工作。上下文被初始化为未定义。稍后它会设置一个action属性，该属性可以是 any ActionCreator，也可以是一个args属性，该属性可以是 any Action。我尝试了几种不同的方法，但就像打地鼠一样。这就是我目前所拥有的：

import { createContext, FC, PropsWithChildren, useState } from 'react'\nimport { Action, ActionCreator } from 'redux'\nimport { Dispatch, SetStateAction } from "react";\n\ntype ModalStateT = {\n  action: ActionCreator<any> | undefined\n  args: Action | undefined\n}\n\ntype ModalContextT = {\n  modalState: ModalStateT\n  setModalState: Dispatch<SetStateAction<ModalStateT>>\n  resetModalState: ({action, args}: ModalStateT) => void\n}\n\nexport const ModalContext = createContext<ModalContextT | undefined>(undefined)\n\nconst ModalProvider: FC<PropsWithChildren> = ({ children }) => {\n\n  const defaultState = {\n    action: undefined,\n    args: …

在 ReactJS 中存储用户 ID 以便所有组件都可以访问它的最佳方法是什么？

我已经研究过 Redux 和 Context，但它们似乎只是存储一个 ID（或者我可能遗漏了什么？）。我还研究了将 ID 存储在父组件 (App) 中，但页面刷新会丢失 id :(。

我正在尝试学习如何在 React 中使用钩子和上下文，但需要使用 TypeScript（这也是新的）。

我的用例是授权：用户要么登录，要么未登录，并且具有角色（例如“管理员”、“超级管理员”）。根据其授权状态，导航栏的呈现方式有所不同。

除此之外，我试图遵循这个示例，并根据我的需要进行简化。

到目前为止，这是我的背景和提供者：

import React, { createContext, useContext, Context, FC SetStateAction, useState } from 'react';

export interface IAuth {
    loggedIn: boolean,
    role: string
}

export const AuthContext = React.createContext<IAuth>({
    loggedIn: false,
    role: ''
});

const AuthProvider: FC = ({children}) => {

    const [auth, setAuth] = useState({
        loggedIn: false,
        role: ''
    });

    return (
        <AuthContext.Provider value={/*What to set as value?*/}>
            {children}
        </AuthContext.Provider>
    )

}

export default AuthProvider;

然后是我的导航栏，它使用了上下文的 Consumer：

class Nav extends React.Component {

    render() …

我正在尝试对 React JS 项目进行身份验证，但是出现以下错误：

呈现的钩子比预期的少。这可能是由意外的提前退货声明引起的。

我正在阅读其他问题（如this和this），但我想我的情况有所不同，因为我useState在创建组件后设置了所有。

我使用了不同的方法来完成这项工作，但它们都不适合我。

我在ContextWrapper组件中添加了这样的方法：

import React, { useState, useEffect } from "react";
import { useCookies } from "react-cookie";
import jwt from "jsonwebtoken";
import { fetchLogin, fetchVerify } from "../fake-server";
import Context from "./context";

export default ({ children }) => {
  const [token, setToken] = useState(null);
  const [message, setMessage] = useState(null);
  const [loading, setLoading] = useState(false);
  const [cookies, setCookie, removeCookie] = useCookies(["token"]);

  useEffect(() => {
    console.log(cookies);
    if (cookies.token) { …

当我在 Expo React Native 项目中使用 React 的 Context API 时收到此警告：

允许需要循环，但可能导致未初始化的值。考虑重构以消除对循环的需要。

我在 App.tsx 中创建了一个上下文：

import Start from "./start";

export const AppContext = React.createContext({
  isLandscape: true,
});

export default function App() {
  return (
    <AppContext.Provider value={{ isLandscape: false }}>
      <Start />
    </AppContext.Provider>
  );
}

在 Start.tsx 组件中，我使用了上下文：

import { AppContext } from "./App"

export default function App() {
  const context = React.useContext(AppContext);
  console.log(context);

  return (
    <Text>Sutff</Text>
  );
}

我看起来警告是因为App导入Choose然后App再次导入上下文。允许需要循环，但可能导致未初始化的值。考虑重构以消除对循环的需要

然而，这不是应该如何使用 Context API 的吗？在 React …

所以我最近开始使用 React 并且正在学习 Context Api。我的代码的热情是：

export const UsersContext = createContext();
export function UsersProvider(props) {
    const fetchedItem = async function () {
        const data = await fetch('https://jsonplaceholder.typicode.com/users');
        const users = await data.json();
        setUsers(users);
    };
    const [users, setUsers] = useState([]);
    useEffect(function () {
        fetchedItem();
    }, []);

    return (
        <UsersContext.Provider value={[users, setUsers]}>{props.children}</UsersContext.Provider>
    );
}

我尝试像这样导入和迭代用户数组：

import { UsersContext, UsersProvider } from './UsersContext';
export default function UsersPage() {
    const [users, setUsers] = useContext(UsersContext);
return (
        <UsersProvider>
{users.map(function (user) {
//I do something with user …