标签: context-api

使用 Next.js，我试图在 Context API 状态中获取数据后将它们保存在 中getInitialProps，以修复道具钻孔。

但由于getInitialProps是静态方法，我们无法通过 this.context 访问它。我设法将它们保存在 componentDidMount 中，但在这种情况下，上下文状态在第一页加载时为空，直到填充为止。不确定在这种情况下的最佳做法是什么。我应该在哪个生命周期中将初始数据保存到 Context 以便像 props 传递一样立即获得它们？

在 React 应用程序中工作，我目前使用单个减速器定义了一些全局状态，但由于应用程序有点大，所以想引入多个减速器，因此在多个减速器上组织状态会更容易和更好！

目前我有：

import { StoreProvider } from './store'
const app = (
  <StoreProvider>
    <App />
  </StoreProvider>
)

商店看起来像：

import React, { useReducer, createContext } from 'react'
import { ApplicantState } from './interfaces/ApplicantState'
import applicantReducer from './modules/Applicant/ApplicantReducer'

const initialState: ApplicantState = {
  applicants: [],
  total: 0,
}

export const GlobalStore = createContext<ApplicantState | any>(initialState)
export const StoreProvider = ({ children }: JSX.ElementChildrenAttribute): JSX.Element => {
  const [state, dispatch] = useReducer(applicantReducer, initialState)
  return <GlobalStore.Provider value={{ state, dispatch }}>{children}</GlobalStore.Provider>
}

我想要另一个减速器，对于前 …

我试图用打字稿设置 ContextApi 和 useReducer。在 useReducer 中的“issuesInitialState”变量上，出现错误：

没有重载匹配这个调用。Overload 1 of 5, '(reducer: ({ state, action }: IssueReducer) => {}, initializerArg: never, initializer?: undefined): [never, DispatchWithoutAction]'，给出了以下错误。“IssuesInitialState”类型的参数不可分配给“never”类型的参数。Overload 2 of 5, '(reducer: ({ state, action }: IssueReducer) => {}, initialState: never, initializer?: undefined): [never, Dispatch]'，给出了以下错误。“IssuesInitialState”类型的参数不可分配给“never”类型的参数。ts(2769)

// Store.tsx
type Issue = {
  closeDate: string | null;
  description: string;
  issueId: number;
  lastEditDate: string | null;
  priorityId: string;
  projectId: number;
  reportDate: string;
  statusId: string;
  title: string;
  userId: number;
};

interface IssuesInitialState {
  issues: Issue[];
  issue: Issue;
  issuesByProject: …

我有 2 个组件和一个上下文提供程序，当我在父级别调用我的钩子时，我可以更改状态并让这 2 个组件通过上下文获取值

contex api 使用的工作演示，但我在父级别调用更改状态，这不是我想要的 https://stackblitz.com/edit/react-51e2ky?file=index.js

我想使用钩子更改内部组件的状态，但是当我单击navbar login.

https://stackblitz.com/edit/react-rgenmi?file=Navbar.js

家长：

const App = () => {
  const {user} = loginHook()
    return (
      <UserContext.Provider value={user}>
        <Navbar />
        <Content />
      </UserContext.Provider>
    );

}

导航栏.js

const Navbar = () => {
  const user = React.useContext(userContex)
  const {setUser} = loginHook()

  return <div>{user ? <span>{user.name}</span> : <button onClick={() => {
    setUser({
      name: 'jane'
    })
  }}>navbar Login</button>}</div>
}

定制挂钩

const loginHook = () => {
  const [user, setUser] = React.useState(null)

  return …

我有一些关于上下文 API 和本地存储的一般性问题困扰着我。

何时使用本地存储？何时使用 Context API，何时使用两者？

我知道要在刷新后保留数据，我需要诸如本地存储或会话存储之类的东西，那么我是否完全放弃了上下文 API 并将所有内容存储在本地存储中？这样我不仅可以存储数据还可以保持刷新？一些见解将非常有帮助。

有什么优点和缺点？

我在官方的 next.js 示例中发现了这一点，state并且dispatch将信息放在了单独的上下文提供程序中。

这样做的意义何在？这种做法是否可以防止不必要的重新渲染？

export const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <CounterDispatchContext.Provider value={dispatch}>
      <CounterStateContext.Provider value={state}>
        {children}
      </CounterStateContext.Provider>
    </CounterDispatchContext.Provider>
  )
}

export const useCount = () => useContext(CounterStateContext)
export const useDispatchCount = () => useContext(CounterDispatchContext)

我正在使用 React 中的 Context API 制作一个待办事项应用程序。在启动开发服务器时，它抛出错误：

类型错误：react__WEBPACK_IMPORTED_MODULE_0___default(...) 不是函数

我是 React 的初学者，无法找出发生此问题的任何可能原因。这是我的App.js：

import React, {useReducer} from 'react';
import Container from "reactstrap/lib/Container";
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css';

import {TodoContext} from './Context/TodoContext';
import todoReducer from "./Context/reducer";

const App = () => {
  const [todo, dispatch] = useReducer(todoReducer, [])
  return(
    <TodoContext.Provider value={{todo, dispatch}}>
      <Container fluid>
        <h1>
          Todo App with Context API
        </h1>
      </Container>
    </TodoContext.Provider>
  )
}

export default App;

我^16.3.1同时使用react和react-dom

我有一个使用 ContextAPI 来管理身份验证的 React 应用程序，我正在尝试在 Svelte 中实现类似的功能。[Web 开发简化][1]

在Authenticate.js我有这个：

import React, { useContext, useState, useEffect } from "react"
import { auth } from "../firebase"

const AuthCt = React.createContext()

export function Auth() {
  return useContext(AuthCt)
}

export function AuthComp({ children }) {
  const [currentUser, setCurrentUser] = useState()
  const [loading, setLoading] = useState(true)

  function login(email, password) {
    return auth.signInWithEmailAndPassword(email, password)
  }

  function logout() {
    return auth.signOut()
  }

  useEffect(() => {
    const unmount = auth.onAuthStateChanged(user => {
      setCurrentUser(user)
      setLoading(false)
    })

    return …

我是 ReactJs 的新手。据我了解，React 上下文 API 用于在组件之间共享数据，以避免在嵌套组件中重复使用 props 传递数据。但我可以用一个简单的单独 JS 文件来做到这一点。在 JS 文件中，我可以简单地声明一个对象来保存数据，并有一些函数来更新或获取所有组件中存储的数据。

Context API 和用于存储用户数据的 JS 文件之间的主要区别是什么？我应该在何时何地使用 React Context API？