标签: react-context

我正在学习反应。我试图在从 api 端点获取数据并将其存储在上下文中后存储用户信息。问题是我必须在每个网页中执行该功能才能访问其中存储的信息。我尝试useEffect在 App.js 中使用来获取数据并在标题和侧边栏中使用它，但它仅在该文件中有效。

我有路由器，因为我的网站有多个页面。限制数据存储在上下文中的代码是否存在任何问题，以及如何使用路由器正确执行此操作。

这些是我的代码，

减速器.js

export const initialState = {
user: null,
};

export const actionTypes = {
    SET_USER: 'SET_USER',
};

const reducer = (state, action) => {
    // console.log(action);
    switch (action.type) {
        case actionTypes.SET_USER:
            return {
                ...state,
                user: action.user,
            };

        default:
            return state;
    }
};


export default reducer;

状态提供者.js

import React, { createContext, useContext, useReducer } from 'react';

export const StateContext = createContext();

export const StateProvider = ({ reducer, initialState, children }) => ( …

我在 ES6 上使用了最简单的上下文提供程序，但我无法将其转换为在 TypeScript 项目上使用。我搜索的每个网站在实现 context api 方面都有完全不同的看法。

它只是一个布尔变量和一个设置它的函数，我一直遇到 TypeScript 的问题。

我是否需要更改整个方法才能使其在 TypeScript 上运行？

上下文.js

import React from 'react'
import Reducer from './reducer'

export const LoadContext = React.createContext()

export const LoadProvider = ({ children }) => {
  const [state, dispatch] = React.useReducer(Reducer, {
    load: true
  })

  const setLoad = (load) => dispatch({ type: 'set_load', load })

  return (
    <LoadContext.Provider value={{ load: state.load, setLoad }}>
      {children}
    </LoadContext.Provider>
  )
}

export const useLoadContext = () => React.useContext(LoadContext)

减速器.js

export default (state, action) …

我有一个与此类似的上下文设置

const DataContext = createContext({ data: null });

const getData = (key) => {
    switch(key) {
        case 1:
            return "Hello"
        case 2:
            return " World"
        default:
            return null
    }
}

export const DataProvider = ({ id, children }) => {

  const data = useMemo(() => {
    return getData(id);
  }, [id]);

  return (
    <DataContext.Provider
      value={{
        data,
      }}
    >
      {children}
    </DataContext.Provider>
  );
};

export default DataContext

以及像这样使用它的子组件

const HelloComponent = () => {
    return <DataProvider id={1}>
        {
            // children are components that …

嘿，我正在寻求帮助。我在使用上下文 api 将数据从一个子组件传递到另一个子组件时遇到一些问题。但我得到了这个 typeError ，到目前为止我尝试了一些搜索，但运气不佳。如果有人不能指出我正确的方向，我将不胜感激！

谢谢

货币提供者.js

import { React, Component} from 'react';

export const MContext = React.createContext('');

class CurrencyProvider extends Component {

constructor() {
    super()
    this.state = {
        setinputValue: (value) => this.setState({ inputValue: value })
    }
}

render() {
    return (
        <MContext.Provider value={this.state}>
            {this.props.children}
        </MContext.Provider>)
}
}
export default CurrencyProvider;

Dropdown.js

import { useQuery, gql } from "@apollo/client";
import { useState } from "react";
import './Dropdown.scss';
import { MContext } from "../CurrencyProvider";

  const EXCHANGE_RATES = gql`
   query GetExchangeRates { …

浏览旧教程，React Router v5 似乎支持使用上下文 API 在不同路由之间共享状态，但我找不到 Router v6 的类似用法。

React Router v5 实现我正在尝试做的事情：

const [user, setUser] = useState(null);
 return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about/">About</Link>
            </li>
          </ul>
        </nav>
        <UserContext.Provider value={user,setUser}>
          <Route path="/" exact component={Index} />
          <Route path="/about/" component={About} />
        </UserContext.Provider>
      </div>
    </Router>
  );

然后你可以使用useContext钩子访问状态

const {value, setValue} = useContext(UserContext);

v6 实施

当尝试将此实现与 v6 一起使用（将降级的 v5 组件替换为新的 v6 组件）时，您将遇到错误，因为您只能将<Route>组件作为路由器中的子组件。

是否可以跨 React Router V6 路由与全局上下文存储共享状态？

以下是我在 V6 实现上的尝试：

索引.js

import { BrowserRouter …

我使用的库上下文不导出其值的类型。它看起来是这样的：

type LocationContextObject = { /* some properties */ };

export type LocationContext = React.Context<LocationContextObject>;

我需要访问LocationContextObject，是否可以从中提取它LocationContext？

这是我所做的：

type LocationContextObject = ComponentProps<typeof LocationContext.Provider>['value'];

它确实有效，但看起来像黑客。所以我想知道是否有更优雅的解决方案。

如果你已经在使用 redux，为什么还要使用react.useContext？我正在努力理解react.useContext相对于redux有什么好处。我有什么遗漏的吗？

我试图更深入地理解react.useContext和redux。因此，请解释为什么一种技术在技术上比另一种更适合某些情况。技术上有何差异？

我尝试在 NextJs 13 中使用 React 上下文，但遇到了错误

这是我的背景 -

'use client';
import { MutableRefObject, createContext, useRef, useContext } from "react";

interface ContextProviderProps{
    children: React.ReactNode;
  }

const GlobalContext = createContext({});

export const ContextProvider:React.FC<ContextProviderProps> = ({children}) => {
    const ref = useRef< MutableRefObject<HTMLElement>>(null);

 return (
    <GlobalContext.Provider value={ref}>
        {children}
    </GlobalContext.Provider>
 )
}

export const useGlobalContext = () => useContext(GlobalContext);

然后我包装我的布局 -

export default function RootLayout({children}: LayoutProps) {
 
  return (
    <html className={`h-screen snap-y snap-mandatory scroll-smooth overflow-y-auto hide-scrollbar ${inter.className}`} lang="ru">
      <body className='text-lg px-3 py-6 max-w-7xl mx-auto …

我正在用我需要的 Reactfire 提供程序包装 Next 根布局的子级：

import './globals.css';
import { AuthProvider, FirebaseAppProvider } from 'reactfire';
import { auth, firebaseConfig } from '../config/firebase';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (

        <html lang="en">
            <body>
                <FirebaseAppProvider firebaseConfig={firebaseConfig}>
                    <AuthProvider sdk={auth}>
                        {children}
                    </AuthProvider>
                </FirebaseAppProvider>
            </body>
        </html>

    )
}

firebaseConfig是正确的，因为我可以使用该模块成功连接到我的 Firebase 应用程序firebase。

当我运行时npm run dev失败并出现以下错误：

请求模块的导入跟踪：

../node_modules/reactfire/dist/index.js
./src/app/layout.tsx
- error ../node_modules/reactfire/dist/index.js
Attempted import error: 'createContext' is not exported from 'react' (imported as 'f').

我尝试更新 npm，降级到以前的 Reactfire …

下面的代码演示了我如何尝试使用react钩子实现react的上下文，这里的想法是我将能够从任何这样的子组件轻松访问上下文

const {authState, authActions} = useContext(AuthCtx);

首先，我创建一个导出上下文和提供程序的文件。

import * as React from 'react';

const { createContext, useState } = React;

const initialState = {
  email: '',
  password: ''
};

const AuthCtx = createContext(initialState);

export function AuthProvider({ children }) {
  function setEmail(email: string) {
    setState({...state, email});
  }

  function setPassword(password: string) {
    setState({...state, password}); 
  }

  const [state, setState] = useState(initialState);
  const actions = {
    setEmail,
    setPassword
  };

  return (
    <AuthCtx.Provider value={{ authState: state, authActions: actions }}>
      {children}
    </AuthCtx.Provider>
  );
}

export default …