我正在尝试为我正在使用的应用程序编写上下文提供程序，我已经创建了以下文件：
import React, { createContext, useReducer } from 'react'
import { initialState, playerUiReducer } from './reducers/player-ui'
const PlayerStateContext = createContext(useReducer(playerUiReducer, initialState))
export default PlayerStateContext
浏览 13提问于2020-05-27得票数 0
回答已采纳
import React from 'react';
import {useReducer, createContext } from 'react';
let initialState = {
associatedOrgs:[],
};
const reducer = (state, action) => {
switch (action.type) {
case "logout":
return initialState;
case "set-associated-org"
浏览 2提问于2021-04-11得票数 0
我不想使用单一状态变量或使用功能组件更新整个状态。我写了一个基于useReducer的钩子，如下所示，但我不确定可能的危险效果。安全吗？谢谢。
import React, { useReducer } from "react";
export function useCustomState<T>(initialState: T) {
const reducer: React.Reducer<T, Partial<T>> = (prevState, newState) => ({
...prevState,
浏览 1提问于2021-10-22得票数 1
回答已采纳
import React,{useReducer} from 'react'
const initialState = {
first : 0
}
const reducer = (state,action) => {
switch(action.type){
case 'inc':
return { first : state.firstc + 1}
case 'dec' :
if(initialState > 0){
return {
浏览 17提问于2021-07-11得票数 1
回答已采纳
我正在尝试使用contextApi和钩子来实现类似于redux的行为，但是我在使用typescript时遇到了一些问题。 我希望同时提供应用程序的状态和分派，以便能够从组件中访问和修改存储。问题是，当我使用createContext时，我手头仍然没有state和dispatch对象，因为我只能在React组件中调用useReducer。因此，我只能在声明参数类型为any的情况下调用createContext，以便在此时传递null，并在稍后传递另一个分派和状态。 import React, { createContext, useReducer } from 'react&#
浏览 24提问于2021-01-22得票数 0
回答已采纳
这段代码以前是运行的，但是现在我得到了一个'rules of hooks‘的错误。 我遗漏了什么？ import React, { createContext, useReducer } from 'react';
import initialState from './initialState';
import reducer from './reducer';
import actions from './actions';
const uiContext = createContext();
const ui
浏览 12提问于2020-03-22得票数 0
使用钩子响应应用程序--我使用React useContext和useReducer来模拟Redux --但是，当Context.Provider值(计数器)被更新时，子组件不会被更新。为什么子组件不改进型？
Store.js
import React, { useReducer } from 'react';
import reducer from '../State/Reducer';
let initialState = {
count: 99
};
export const StoreContext = React.createContext
浏览 0提问于2019-01-28得票数 2
回答已采纳
我创建了以下组件：
import React, {useReducer} from 'react'
type ACTION_TYPE = | {type: 'SET_USER', userId: number} | {type: 'DELETE_USER', userId: number, deleteMessages: boolean}
interface User {
id : number;
name? : string;
surname?: string;
hasDiscount?: boole
浏览 0提问于2021-08-18得票数 0
回答已采纳
我正在使用带有Typescript的React Hooks useReducer。然后我想把类型传递给useReducer。如何将类型传递给Reducer函数，泛型类型。 interface ActionTypes {
FETCH,
}
interface TestPayload<T> {
list: T[];
}
interface State<T> {
list: T[];
}
interface Action<T> {
type: ActionTypes;
payload: TestPayload<T>;
}
expor
浏览 61提问于2020-08-19得票数 0
我一直在遵循一个指南，使用useContext将reducer传递给子组件，但从子组件调度时，它似乎没有重新呈现父组件。
从子组件调度时，状态本身似乎正在正确更新(由console.logging state.count完成)，但父组件不反映状态的更改。
我试着把一个分派函数作为一个道具传递给Child，这确实更新了App.js，但我想我的方法更简洁，我可能做错了什么。我还将{state.count}放在Child.js中，它确实得到了正确的更新，但在这种情况下，我需要在父组件中使用它。代码如下：
App.js
import React, { useReducer } from 're
浏览 26提问于2019-07-06得票数 4
回答已采纳
如何修复此错误？我试过了，但还是做不到。 TypeError: Cannot read property 'user' of undefined
App
C:/Users/Bogosyna/Desktop/IT job projects/roro-facebook/src/App.js:11
8 | import {useStateValue} from "./StateProvider";
9 |
10 | function App() {
> 11 | const [{ user }, dispatch] = useStateV
浏览 31提问于2020-10-02得票数 0
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter() {
c
浏览 6提问于2019-10-25得票数 0
回答已采纳
我正在尝试检测我的nextjs应用程序中的URL路径，并根据context中的url路径设置初始状态，但我得到的窗口没有定义。我知道在客户端渲染之前不会定义window，但是如果我想将初始状态传递到上下文中，我应该把它放在哪里呢？ import React, {createContext, useReducer} from "react";
import Reducer from './reducer'
const initialState = {
'about': window.location.pathname == 'a
浏览 30提问于2020-06-20得票数 0
回答已采纳
我有一个带有登录和注销按钮的路由，浏览器中的错误是'Property‘调度’‘不存在于类型’{}‘上。’
(home.tsx)
import React, { useContext, useEffect, useRef, useState } from 'react';
import { Dispatch, Global } from '../components/context';
import { LOG_IN, LOG_OUT} from '../components/reducer';
cons
浏览 13提问于2019-11-23得票数 1
回答已采纳
诸如从购物车中添加和删除之类的功能可以很好地工作。但是，在刷新浏览器后，不会成功保存数据。如何在刷新浏览器时仍将数据保存在购物车中。
这是我的密码。如果有什么代码你想看的话告诉我
import React, { useEffect } from "react";
import { useStateValue } from "../hooks/StateProvider";
function CheckoutPage() {
const [{ basket }, dispatch] = useStateValue();
useEffect(
浏览 4提问于2022-07-06得票数 2
我正试图在我不久前开发的使用useReducer的秒表应用程序中实现setState。我在实现它的过程中遇到了很多困难，我觉得我的困惑集中在还原器功能是如何工作的。
我遇到的主要问题是，我不确定还原器功能是如何工作的，因为我在实现定时器按钮的逻辑时遇到了困难。我假设我应该把逻辑放在开关语句中。
以下是我的实际代码：
import React, { useReducer } from "react"
function init(initialState) {
return { time: initialState }
}
let initialState = {
t
浏览 2提问于2021-04-23得票数 1
回答已采纳
我在使用useReducer react钩子时遇到了一个奇怪的问题，我知道错误的根源，但我不知道为什么它会出现在我的代码中。 import React, { useReducer } from 'react'
import { Button } from 'react-bootstrap'
export default function User() {
const initialState = {
lowScore: 0,
mediumScore: 0,
hightScore: 0
}
const reducer = (s
浏览 11提问于2020-09-25得票数 1
回答已采纳
我使用的是React-Context-API而不是redux，但是在创建了StateProvider和reducer之后，当我将应用程序组件包装在Index.js中的StateProvider中时。我的整个应用程序都被本地主机上的一个白色页面所取代。代码片段如下所示。 Index.js import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWe
浏览 35提问于2021-09-06得票数 1
回答已采纳
2回答
假设我实现了这样一个简单的全局加载状态：
// hooks/useLoading.js
import React, { createContext, useContext, useReducer } from 'react';
const Context = createContext();
const { Provider } = Context;
const initialState = {
isLoading: false,
};
function reducer(state, action) {
switch (action.type) {
ca
浏览 1提问于2020-01-31得票数 9
回答已采纳
试图解决如何将类型传递给值
<Context.Provider value={[state, dispatch]}>{children}
</Context.Provider>
类型'unknown[]‘缺少’InitialState‘类型中的下列属性: navigateTo、user、avatar、dashBoardSelectedMenuItemts(2739) index.d.ts(338、9)：预期类型来自在'IntrinsicAttributes & ProviderProps’(JSX属性)React.ProviderProps.v
浏览 5提问于2021-11-14得票数 2
回答已采纳
我想在下面的代码中使用适当的TS类型，而不是任何类型。我是新来的，请帮帮忙.
如何为useReducer useContext设置以下上下文API代码的类型：
import React, {createContext, Dispatch} from 'react';
import {firebaseUser} from '../@types/User';
interface Actions {
SET_IMAGENAME: string;
SET_USER: string;
}
export const Actions: Actions = {
浏览 1提问于2020-07-06得票数 5
回答已采纳
因此，我创建了这些上下文来处理登录用户，并将登录的用户检索到任何可能需要它的组件。
下面是它们：
context.js
import React, { useReducer } from "react";
import { AuthReducer, initialState } from "./reducers";
const AuthStateContext = React.createContext();
const AuthDispatchContext = React.createContext();
export function useAuthS
浏览 2提问于2021-10-18得票数 1
我正在学习上下文API。reducer.js
export const initialState = {
user: null,
playlist: [],
playing: false,
item: null
};
const reducer = (state, action) => {
console.log(action);
switch(action.type) {
case 'SET_USER':
return {
...state,
浏览 4提问于2022-05-28得票数 0
我正在学习如何在React中使用useReducer，当我试图使状态计数和数字相互交互时，我得到了这条错误消息：“警告:接收到children属性的NaN”。
import React, { useReducer } from 'react'
const initialState = {
count: 0,
number: 2,
}
const countReducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
浏览 4提问于2020-05-13得票数 0
回答已采纳
1回答
对象传递的每个呈现更改。
、、、
我正试图为我正在构建的一个应用程序定义一个全球性的国家提供者。但我一直搞错了
作为值支柱传递给上下文提供程序的对象(在第19行)更改每个呈现。若要修复此问题，请考虑将其包装在useMemo钩子中
这是我的文件结构。state.ts
export default interface State {
data: boolean
}
export const initialState: State = {
data: false,
}
action.ts
type Action = {
type: "SET_DATA"
value: boolean
浏览 1提问于2022-03-13得票数 0
回答已采纳
此错误显示在我的contactState函数React钩子中"useReducer“在函数"contactState”中调用，该函数既不是React函数组件，也不是自定义React钩子函数react-hooks/钩子规则 import React, { useReducer } from "react";
import axios from "axios";
import uuid from "uuid";
import contactReducer from "./contactReducer";
import
浏览 7提问于2020-10-11得票数 0
1回答
我正在试着解决这个问题，但是不能解决它。我已经尝试了许多解决方案，但无法解决此问题。 import React, { useContext } from 'react';
import { Transaction } from './Transaction';
import { GlobalContext } from '../context/GlobalState';
export const TransactionList = () => {
const { transactions } = useContext(Global
浏览 29提问于2020-06-14得票数 1
我试着运行这段代码，但是它给了我一个运行时错误
TypeError:对象不可迭代(不能读取属性符号(Symbol.iterator))
这是密码。
import React, { useContext} from "react";
import { GlobalContext } from '../GlobalState';
const MediaCard = ({ songs, categotyTitle }) => {
const [{}, dispatch] = useContext(GlobalContext);
const setC
浏览 1提问于2020-07-17得票数 2
回答已采纳
我将此错误作为错误:StateProvider(.)：从呈现中没有返回任何内容。这通常意味着缺少返回语句。或者，若要不呈现任何内容，请返回空。因为这部分的原因。我正在进行我的项目，并使用react和redux。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { StateProvider } from './StateProvider&#
浏览 2提问于2021-02-11得票数 0
回答已采纳
我在React Typescript中创建项目，并决定使用Hooks + useContext + useReducer。THen，我创建了单独的文件来配置初始状态和提供者。但在使用ADD_TRANSACTIONS时，我会遇到错误。下面是我现在拥有的代码： import * as React from "react";
import { createContext, useReducer, ReactNode } from "react";
import transactionReducer from "./transactionReducer"
浏览 40提问于2020-04-11得票数 0
1回答
我设置了这个reducer.js文件以使用React的useReducer
import {useReducer} from 'react';
const initialState = {
test: 0,
};
const reducer = (state, action) => {
switch (action.type) {
case 'reset':
return initialState;
case 'addTest':
return {test: state.test + 1
浏览 1提问于2018-11-05得票数 0
回答已采纳
我有一个包含很多组件的react应用程序。我使用React context api来管理应用程序中的状态。 我在上下文中的反应状态如下所示。 { key1: value1, key2: value2, key3 : { key4 : { key5 : value5 } } } 所以，它基本上是一个嵌套的json。 现在，其中一个键，假设键3是从react组件树中的许多组件更新的。它可以由树层次结构中的任何组件更新。 因此，在本例中，我想在key3发生变化时调用后端api。我如何在react中做到这一点？ 编辑1:- 下面是我如何设置我的上下文。 import React, { create
浏览 42提问于2021-10-26得票数 2
我正尝试在useReducer中使用createContext，但遇到了一些问题
我正在调度两个操作，这两个操作都将它们的有效负载存储在状态中的同一位置，而不是存储到它们自己的位置。
您的帮助我将不胜感激。
这是我的店
import React, { createContext, useReducer, Dispatch } from 'react';
import { InitialStateType } from './types';
import { citiesReducer, CitiesActions } from './citiesRe
浏览 11提问于2020-05-17得票数 0
回答已采纳
我正在尝试使用useReducer和useContext钩子来设置一个React存储。React.createContext(defaultValue)在我的TS检查器上出现问题。我尝试了一些不同的方法，但本质上，我在组件状态中设置状态和分派，但是当我调用提供程序并将值作为{ useReducer()，createContext(null) }传递时，它没有告诉我“类型'{ useReducer()：any；dispatch : React.Dispatch；}‘不能赋值给类型'null’。” 我不能理解这一点，因为在它出错的时候，我已经分配了状态和分派，并且值不应该再为空。
浏览 90提问于2020-07-25得票数 5
2回答
我正在使用TypeScript开发一个React应用程序。我想用React和Context API来设置状态管理，并发现了这个很酷、简单和简短的。
我遵循了教程，但我的编译器显示了几个错误。我认为这是基本的类型错误，但我没有得到(我更习惯于JavaScript而不是TypeScript)。
我国的情况：
import React, { createContext, useContext, useReducer } from 'react';
export interface IState {
isAuth: boolean;
user: string;
}
inte
浏览 3提问于2020-11-25得票数 1
我是一个noob typescript开发人员，我正在做一个项目，在这个项目中，我将有一个上下文API来管理我的状态。 我已经尝试了许多方案来解决减速器的问题，但我不能，任何帮助都是感激的。 import React, { useReducer } from "react";
type ActionType = { type: string; payload: any };
type StateType = { [key: string]: any };
type Dispatch = (action: ActionType) => void;
type Action
浏览 15提问于2021-07-23得票数 0
回答已采纳
我正在尝试创建一个简单的todo应用程序，使用React，类型记录和钩子useContext和useReducer。
index.tsx
import React, { useContext, useReducer } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import TodosContext from "./context";
import todosReducer from "./reducer";
imp
浏览 1提问于2019-12-07得票数 3
这是我的密码
import React, {createContext, useContext, useReducer } from 'react';
// this is data layer
export const StateContext = createContext();
// build a provider
export const StateProvider = ({ reducer, initialState, children}) => {
<StateContext.Provider value={useReduc
浏览 2提问于2020-07-15得票数 0
回答已采纳
我不明白还原器是如何知道计数是从状态而不是在代码中使用状态名称的。我以为这就像"return {state.count: state.count + 1}“。它怎麽工作?
import { useReducer } from 'react';
const initialState = {count: 0};
const reducer = (state, action) =>{
switch(action.type){
case 'minus':
return
浏览 5提问于2022-05-27得票数 0
回答已采纳
1回答
请告诉我我在这里做错了什么： 我得到以下错误，类型'{ wishList: any；addBookToWishList：(book: any) => void；}‘不可分配给类型'{ wishList: never[]；}’。对象文本只能指定已知的属性，并且“addBookToWishList”在类型“”{ wishList: never[]；}“”.ts中不存在(2322)“ import React, {createContext, useReducer, useEffect} from "react";
import AppReducer from
浏览 12提问于2020-10-16得票数 1
我正在使用react和contextAPI开发一个简单的MERN堆栈todo应用程序，我使用axios从mongodb数据库中获取数据，并使用useEffect设置initialState数组变量来模拟MERN，然后使用initialState作为useReducer<code>E 211</code>的参数。我的问题是子组件没有接收到initialState，而是一个空数组，但是所有其他的道具(如disptach和loading变量)都通过了。为什么useReducer返回和空状态数组？
父组件：
import React, { useEffect, useState
浏览 5提问于2020-04-06得票数 1
回答已采纳
1回答
有人能告诉我为什么这里有两个控制台打印吗？
下面是我的代码：
import React, {useReducer} from 'react';
const Counter = () => {
const initialState = { count: 0 }
const reducer = (state, action) => {
switch(action.type) {
case 'INC':
console.log(state) <---
浏览 1提问于2022-06-10得票数 0
我遵循了一个指南，该指南展示了如何使用一个名为state.js的文件中的几行代码来访问和管理全局状态。
import React, {createContext, useContext, useReducer} from 'react';
export const StateContext = createContext();
export const StateProvider = ({reducer, initialState, children}) =>(
<StateContext.Provider value={useReducer(reducer,
浏览 1提问于2019-12-03得票数 1
我刚开始打字，我一直在尝试设置createContext和useReducer。但我得到了以下错误。任何能提供一些信息或帮助的人都将不胜感激。
没有过载和这个电话匹配。重载5中的1，‘(还原器: ReducerWithoutAction，initializerArg: any，初始化器？：未定义)：any，DispatchWithoutAction'，给出了以下错误。类型的参数‘(状态: WorkoutState，action: WorkoutAction) => {workout: WorkoutState；}{workout：(WorkoutState \{ _id: st
浏览 4提问于2022-07-14得票数 1
回答已采纳
我正在尝试用新的react API获取一些数据，并停留在需要获取异步数据的舞台上。我只是不知道该怎么做
如何将数据获取放在switch语句中，或者这不是一种应该如何实现的方法？
import React from 'react'
const ProfileContext = React.createContext()
const initialState = {
data: false
}
let reducer = async (state, action) => {
switch (action.type) {
case 'unload&
浏览 0提问于2018-11-05得票数 115
回答已采纳
我正在将我的redux结构转换为与useReducer相结合的上下文API。一切都如愿以偿，不过我有一个web套接字中间件，我将它绑定到applyMiddleware和redux-thunk中。对于如何将中间件绑定到我的结构中，我感到非常困惑。
MyContext.js
import { createContext } from 'react'
export const initialState = {
values : {}
}
export const Context = createContext(initialState)
MyProvider.js
imp
浏览 3提问于2021-10-15得票数 0
回答已采纳
我不是React方面的专家，所以在这里提问。我想用React.useContext应用程序接口创建应用程序上下文。下面是我的简单示例代码：
import {
createContext,
FC,
useCallback,
useContext,
useMemo,
useReducer,
} from 'react'
type State = {
modal: boolean,
errorMessage: string | null,
}
type Action =
| { type: 'TOGGLE
浏览 94提问于2021-06-08得票数 0
我第一次尝试使用React钩子，我想最终替换旧的上下文API。如何实现useContext钩子来实现全局状态？ 我一直在尝试遵循Medium上的一些教程，其他Stack overflow帖子，以及一些随机的博客帖子。下面是我目前拥有的代码： APP.JS import React from 'react';
import { AppProvider, useAppValue } from './AppContext';
import FormLogin from './FormLogin';
import FormRegister from &
浏览 26提问于2019-05-17得票数 1
回答已采纳
我使用带有useContext的全局钩子来存储注册用户信息。我不知道为什么useContext两次呈现我的组件，第二次却没有定义状态。提供程序是全局的，在index.js中
有什么办法防止组件重复渲染吗？
store.js：
import React, { createContext, useReducer } from 'react';
const initialState = {
accessToken: '',
expirationDate: '',
fullName: ''
};
const store =
浏览 2提问于2020-02-28得票数 0
1回答
我有一个在onClick处理程序中调用的函数。它保存数据，然后使用react-router：
async function saveAndExit() {
await dispatchSave(data);
navigateAway();
}
问题是dispatchSave不能很容易地等待：
// react hooks useReducer
const [state, dispatch] = useReducer(reducer, initialState)
// problem: dispatch doesn't return a promise
function dis
浏览 7提问于2021-06-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
