useReducer钩子中的reducer函数问题
useReducer是React中的一个钩子函数，用于管理组件的状态和状态更新。它接受一个reducer函数和初始状态作为参数，并返回当前状态和一个dispatch函数。
reducer函数是一个纯函数，接受两个参数：当前状态和一个action对象，根据action的类型来更新状态。它返回一个新的状态对象，而不是直接修改原始状态。reducer函数通常使用switch语句来根据action的类型执行相应的操作。
useReducer的优势在于可以将复杂的状态逻辑封装到reducer函数中，使组件的状态管理更加清晰和可维护。它适用于需要处理多个相关状态或具有复杂状态转换逻辑的组件。
useReducer的应用场景包括但不限于：
- 表单处理：可以使用useReducer来处理表单的输入和验证逻辑。
- 状态共享：多个组件需要共享同一个状态时，可以使用useReducer来管理共享状态。
- 复杂状态逻辑：当组件的状态逻辑较为复杂时，可以使用useReducer来将逻辑封装到reducer函数中，提高代码的可读性和可维护性。
腾讯云提供了云原生应用开发平台Tencent Cloud Native，其中包括了一些与useReducer相关的产品和服务：
- 云函数（Serverless Cloud Function）：无需管理服务器，按需运行代码，可以与useReducer结合使用，实现无服务器的状态管理。
- 云数据库（TencentDB）：提供高可用、可扩展的数据库服务，可以存储和管理useReducer的状态数据。
- 云存储（COS）：提供安全可靠的对象存储服务，可以用于存储和管理useReducer的状态数据。
更多关于腾讯云产品和服务的信息，可以访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
1回答
为了让它更有意义，让我们看一下这个看起来像react useReducer的迷你简单实现 type Reducer<S, A> = (prevState: S, action: A) => S;
type Dispatch<A> = (value: A) => void;
function useReducer<S, A>(reducer: Reducer<S, A>, initState: S): [getState: () => S, dispatcher: Dispatch<A>] {
let stat
浏览 11提问于2021-01-28得票数 1
回答已采纳
我不想使用单一状态变量或使用功能组件更新整个状态。我写了一个基于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
回答已采纳
如果我们看一下增量的标准示例，使用useReducer钩子进行减量：
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
浏览 4提问于2022-09-03得票数 1
回答已采纳
我正在尝试创建一个从API中获取数据的React项目，并且我试图从外部文件中使用useReducer钩子和useContext。文件夹结构：
publicsrc (在src文件夹中，除了其他组件和其他files)package.json之外，还有context.js和reducer.js。
reducer.js：
const reducer = (currentState, action)=>{
switch(action.type){
case 'setBreedList':
// console.log('
浏览 2提问于2021-06-27得票数 0
回答已采纳
我试图使用从fetchData钩子获取数据，但奇怪的是，它会产生以下错误->
Line 26:31: React Hook "useReducer" is called in function "fetchData" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Line 28:5: React Hook "useEffect" is called in functi
浏览 10提问于2020-07-21得票数 1
回答已采纳
我有一个使用useReducer钩子的组件： const init = {
statA: true,
statB: true
};
const reducer = (state, action) => {
switch (action.type) {
case "ActionA":
return { ...state, statA: !state.statA };
case "ActionB":
return { ...state, statB: !state.statB };
default
浏览 25提问于2019-04-07得票数 7
回答已采纳
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
我使用包含状态的react钩子useReducer，假设我有3个状态字段- a，b和c。这些字段绑定在一起，并且大部分都是一起更改的-因此reducer函数是内聚的。如果我有不同的状态字段d，但对另一个状态没有内聚-我是应该在同一个组件中同时使用useState (用于d)和useReducer (用于a，b和c)，还是使用相同的reducer函数更好？此外-如果我有更多像d这样的字段在类似的地方更改-我应该使用两个单独的缩减程序吗？这种情况下的最佳实践是什么？
浏览 27提问于2019-04-09得票数 3
回答已采纳
我希望使用useReducer获取数据，而useEffect getPeople是一个函数，当我控制台日志results时，返回https://swapi.dev/documentation#people的结果，数据正在正确提取，但状态没有更新。
我的职能部分：
export default function App () {
const [state, dispatch] = useReducer(reducer, initialSate);
useEffect(async () => {
const { results } = a
浏览 3提问于2021-04-19得票数 2
回答已采纳
1回答
由于某些原因，我无法使用useContext钩子。
用于目录结构的回购链接：
错误：
未处理运行时错误
错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器的版本不匹配(例如React )。
你可能违反了胡克斯的规则
在同一个应用程序中，可能有多个React副本。
我的代码：
上下文：
import { createContext, useReducer } from 'react'
export const DataContext = createContext();
const
浏览 3提问于2020-08-13得票数 0
回答已采纳
const Header = () => {
const firebaseAuth = getAuth(app);
const provider = new GoogleAuthProvider();
const [{user}, dispatch] = useStateValue();
const login = async () =>{
const {
user: { refreshToken, providerData },
} = await signInWithPopup(firebaseAuth, provider);
dis
浏览 1提问于2022-09-24得票数 0
回答已采纳
我一直在使用useReducer()，这样我就可以在一些组件之间共享一些状态。requestReducer中有一个名为isLoading的属性，它的默认/初始状态设置为false。有两个函数将操作分派给reducer (initializeLoading：将isLoading更改为true，getRequestResponse：将isLoading更改回false)。但是，当reducer用来初始化codeinitializeLoading-的函数被CallingComponent调用时，它使用这些函数的指针来调用它们；useEffect内部的状态更改(与requestState.isLoa
浏览 20提问于2021-07-24得票数 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
回答已采纳
我正在写一个React登录页面，但下面有一个错误：
4:40错误反应钩子"useCreateContext“不能在顶层调用。必须在React函数组件或自定义React Hook函数中调用React Hooks
反应钩子/钩子规则
以下是可能导致问题的代码。
import React, { useContext, createContext } from 'react';
export function useCreateContext(defaultValue, reducer) {
const defaultDispatch = () => default
浏览 1提问于2021-05-23得票数 0
4回答
来自
在它中，3d参数允许您提取用于计算减速器外部初始状态的逻辑。这对于稍后响应动作重置状态也很方便。
守则如下：
function init(initialCount) {
return { count: initialCount };
}
function reducer(state, action) {
switch (action.type) {
...
case 'reset':
return init(action.payload);
...
}
}
function Counter({initialCou
浏览 4提问于2019-11-25得票数 32
回答已采纳
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
回答已采纳
看看，有一个初步的方法来实现它。但和其他许多人一样，这很少是一种有效的方式。
因此，我想知道哪种方式是声明reducer函数的最佳/高效/更干净的方法，因为它是一个：
假设import React, { useReducer, useCallback } from 'react'
1.外部功能(doc样式)
const reducer = (state, action) => state
const MyComp = () => {
const [state, dispatch] = useReducer(reducer, {})
}
2. useCal
浏览 5提问于2020-04-11得票数 0
回答已采纳
我是类型记录的新手，我正在实现react和useReducer。我正在学习一个教程，但是我在还原器函数中得到了一个Parameter 'action' implicitly has an 'any' type.错误。
减速器函数
function reducer(state, action) { // error Parameter 'action' implicitly has an 'any' type.
return { count: state.count + 1 }
}
CountProvider
con
浏览 9提问于2021-03-26得票数 2
我正在尝试使用useReducer和useContext钩子来设置一个React存储。React.createContext(defaultValue)在我的TS检查器上出现问题。我尝试了一些不同的方法，但本质上，我在组件状态中设置状态和分派，但是当我调用提供程序并将值作为{ useReducer()，createContext(null) }传递时，它没有告诉我“类型'{ useReducer()：any；dispatch : React.Dispatch；}‘不能赋值给类型'null’。” 我不能理解这一点，因为在它出错的时候，我已经分配了状态和分派，并且值不应该再为空。
浏览 90提问于2020-07-25得票数 5
我想知道在使用useReducer钩子时，如果需要添加一些副作用，我有哪些选项。
例如，有一个TODO应用程序：
const initialState = {items: []};
const reducer = (state, action) => {
switch (action.type) {
case 'ADD':
return {
...state,
items: [...state.items, action.newItem]
};
default:
throw new
浏览 2提问于2020-03-15得票数 17
2回答
我目前正在尝试迁移Redux文件，以便用最小的更改来响应钩子(useReducer)。我正在重用Redux减速器和初始状态。例如：
export const INITIAL_STATE = {
locale: "en"
};
export const reducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case "CHANGE_LOCALE":
return {
...state,
浏览 9提问于2022-02-24得票数 0
您好，我有一个问题，保存我的当前主题。基本上，我可以正常更改主题，但当我更新页面时，它会返回到我的轻主题。
我找不到在localstorage中保存状态类型的解决方案。
代码：
export default function App() {
const [theme, setTheme] = usePersistedState('light');
const toggleTheme = () => {
setTheme(theme.type === 'light' ? { type: 'dark' } : { type: &
浏览 17提问于2020-02-16得票数 0
这里是一个CodeSandbox，它有下面的示例代码，linter突出了一些问题：
下面是我试图做的一个基本例子。在容器组件中，我有一个上下文AppContext，它向子组件<ChildConsumer />和<ChildDispatcher />提供状态。
<ChildConsumer />组件正在使用useContext接收此状态，这似乎与预期的一样。
在<ChildDispatcher />内部，当单击按钮时，我试图分派一个操作。为此，我创建了一个处理操作的还原器reducer。我还在这里设置了useReducer，它接受reducer和
浏览 4提问于2020-03-07得票数 1
回答已采纳
2回答
谁能帮我更新状态与超时在反应减速器。
即使是使用纯javascript，我也没有太多的经验，所以我自己现在很难找到答案。
在我的第一个react (使用useContex和useReducer)中，我有一个简单的带有onClick函数的按钮复选框，用于调度减缩器中的类型：
<ToggleButton
className="mb-2"
id="Getdocs"
浏览 9提问于2022-07-17得票数 1
回答已采纳
我正在测试一个反应应用与Jest &酶。当我运行npm run test时，我在UserContext.jsx中得到了在MainPage.jsx中导入的错误。我怎么才能解决呢？
错误消息
不变违反:无效钩子调用。钩子只能在函数组件的主体内调用。这可能发生在以下原因之一: 1. app和呈现器(如React ) 2的版本可能不匹配。您可能违反了Hooks 3的规则。在同一个应用程序中可能有多个React副本。
11 | };
12 |
> 13 | export const useUserValue = () => useContext(Us
浏览 0提问于2020-09-05得票数 1
回答已采纳
我在打字稿中使用CreateContext，我可以理解为什么代码会出现问题，但我无法解决它。它是对typesafe TX的基本使用，使状态和(useReducer)调度在组件层次结构中可用。
沙箱：
上下文接口：
export interface ContextInterface {
state: AppState;
dispatch: (action: ActionType) => void;
}
使用createContext的接口(我认为它必须是一个部分，因为createContext不会使用零args)
const TodoContext = createContext&
浏览 3提问于2022-01-26得票数 1
回答已采纳
下面的代码类似于useState (即useReducer)，但我找不到任何文档来解释原因。但是，我用调试器解决了这个问题。 const reducer = (state,action) => {
return action;
};
const [email,setEmail] = useReducer(reducer,"");
浏览 7提问于2019-04-07得票数 0
回答已采纳
嗨，谢谢你阅读这篇文章。我正在使用一个使用useReducer的github finder react应用程序，我正在尝试设置onload时的初始状态，以加载一些用户，而不是一个空数组。如果我将api数据硬编码到数组中，它将按照我想要的方式显示，但我希望对api执行GET操作，并将数据传递到数组中。我是个新手，谢谢大家的帮助。 const GithubState = (props) => {
const initialState = {
users: [],
user: {},
repos: [],
loading: false,
};
/
浏览 88提问于2021-10-29得票数 0
回答已采纳
1回答
当我试图使用useQuery()时，我得到了下面的错误。如果你需要更多的细节，请告诉我。
错误:无效钩子调用。钩子只能在函数组件的主体内调用。这可能发生在以下原因之一: 1. React和呈现器(例如React ) 2的版本可能不匹配。您可能违反了Hooks 3的规则。在同一个应用程序中可能有多个React副本，参见有关如何调试和解决此问题的提示。
我的代码如下..。
get-characters-action.js
import React from "react";
import * as ACTION_TYPES from "./../constants/act
浏览 3提问于2019-12-21得票数 0
我已经实现了一个定制的useFetch钩子，所以在我的应用程序中进行抓取：
import { useEffect, useState } from 'react'
const useFetch = ({ url, defaultData = null }) => {
const [data, setData] = useState(defaultData)
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
useEffect(()
浏览 0提问于2018-11-19得票数 4
回答已采纳
我有一个具有复杂数据模型的应用程序，所以useReducer()是一个很好的选择。由于这种复杂性，我将从React而不是我的原始文档中共享代码，并解释我想要做的事情。
以这段代码为例，假设每当发生更改时，我想将它保存在服务器上的数据库中。
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decr
浏览 0提问于2019-10-02得票数 1
回答已采纳
对TS来说很新鲜。我有一个非常简单的演示应用程序，它使用useReducer()钩子来管理列表中项目的selected状态。我认为我在使还原器类型安全方面做得很好，但是当我调用useReducer()钩子时，我得到了TS2769: No overload matches this call错误。我将列出还原程序文件的内容，调用useReducer()的组件，然后是准确的错误文本，以及一个沙箱链接：
这是我的还原机文件：
// src/Components/List/Reducer.ts
export type ListAction = {
type: 'TOGGLE_SELEC
浏览 12提问于2022-07-15得票数 0
回答已采纳
我有一个数学算法，我想把它与React分开。React将是该算法中状态的视图，而不应该定义逻辑在算法中如何流动的方式。此外，由于它是分离的，所以对算法进行单元测试要容易得多。我已经使用类组件实现了它(简化)： class ShortestPathRenderer extends React.Component {
ShortestPath shortestPath;
public constructor(props) {
this.shortestPath = new ShortestPath(props.spAlgorithm);
this.state =
浏览 15提问于2019-10-13得票数 1
回答已采纳
对于useState，我们可以使用函数更新，以便使用以前的状态计算新状态。
例如，可以以这种方式使用计数增量函数。
const [state, setState] = useState(0)
const increment = () => {
setState((prevState) => (prevState + 1)))
}
当有多个HTTP请求试图更改状态时，功能更新工作得很好。
我想知道是否可以使用useReducer挂钩实现相同的功能，以便使用以前的状态来更新状态？
编辑：
对不起，我在使用useReducer钩子时似乎犯了一个错误。我以前不工作的代码是：
const
浏览 2提问于2021-03-23得票数 0
回答已采纳
我正在重构我的一个上下文的复杂状态管理，它以前使用了钩子"useStateWithCallback“。
我已经决定使用"useReducer“重构代码，这将使其更具可读性。
目前，我正在这样做：
export function ContentsProvider({ children }) {
const [contents, setContents] = useStateWithCallback(new Map([]));
const addContents = (newContents, callback = undefined) => {
setCo
浏览 3提问于2021-03-29得票数 1
回答已采纳
我想知道操作和公开新的React上下文的推荐最佳实践是什么。
操纵上下文状态的最简单的方法似乎是将一个函数附加到上下文，一旦调用这个上下文，调度(usereducer)或setstate (useState)就会改变其内部值。
export const TodosProvider: React.FC<any> = ({ children }) => {
const [state, dispatch] = useReducer(reducer, null, init);
return (
<Context.Provider
value={{
浏览 1提问于2019-04-21得票数 7
回答已采纳
1回答
我是第一次学习ts的初学者。提前感谢您分享您的知识。我在做一个todolist。我使用react来完成它。但是现在我使用react和typescript一起来完成代码。 在我看来，“减速机”不能正常工作。我该怎么操作呢？如果你告诉我，我将不胜感激。这是带有表面错误的'App.tsx‘代码。 import React, { useState } from "react";
import Add from "./Add";
import List from "./List";
import ToDo from "./ToDo"
浏览 42提问于2021-02-04得票数 0
回答已采纳
我是新手，我有一个自定义输入，其中我通过自定义钩子来处理值和输入处理程序，但是希望使用自定义输入将值和输入处理程序获取到父组件，但是无法解决如何实现这一点。我写了以下代码。
在定制钩子上
import {useReducer} from "react";
const INITAL_STATE = {value:'',valid:false,pristine:true, error:''}
const REDUCER_ACTIONS = { input:"INPUT", blur:"BLUR"}
const
浏览 2提问于2022-02-03得票数 0
回答已采纳
将鼠标悬停在我的useReducer函数中的todos变量上：const [state, dispatch] = useReducer(reducer, todos);会显示以下类型错误。 Argument of type 'TodoState[]' is not assignable to parameter of type 'never'. 我尝试在reducer函数中添加TodoState[]作为返回类型，以确保不会意外返回never[]，但是，错误仍然存在： 相关代码如下： interface TodoState {
id: string;
}
浏览 132提问于2021-07-31得票数 1
回答已采纳
2回答
，这里提到“您是否可以信任响应来按照调用setState的相同顺序更新状态.是的”。我的问题是，调度(useReducer)事件也以调用它们的相同顺序运行吗？例如，考虑如下所示：
const [states, dispatch] = useReducer(reducer, initialState)
dispatch('a')
dispatch('b')
我是否可以确保所有在还原器函数中的逻辑都是用参数'a‘执行的，而它是用参数'b’执行的(参数'b‘的调用使用了第一个调用修改的状态)？
改进型:还原剂和setStates的结合又如何？他
浏览 0提问于2020-06-06得票数 1
3回答
反应路由器状态？
、、
我有一台simple code here。我正在使用react-router，我不能理解为什么所有页面的状态都固定为初始呈现的状态，而输入字段共享所有的值？ import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Page from "./Page";
export default function App() {
return (
<Router>
<Link to="/">
浏览 23提问于2020-09-26得票数 3
回答已采纳
使用钩子响应应用程序--我使用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
回答已采纳
2回答
编辑:下面是最初的问题，我问我的整个架构是否良好。后来，我编辑了这个主题(和标题)，以便直接讨论我的问题，以帮助社区。因此，在跳过主帖子时，您可能会直接跳到答案上，找到您想要的结果。
我是新的反应，我遇到了问题背靠背。我怀疑我的模式有问题，我真的很希望有人能批评我的模式。
组件A:
它呈现(除其他外)组件B
组件A在它呈现的useState数组上有一个C_obj钩子，称为C_obj_arr
const [C_obj_arr, ASetter] = useState<C_obj[]>()
它将此C_obj_arr和ASetter作为属性提供给组件B，以允许数据备份。
组件B
它在组
浏览 5提问于2022-05-12得票数 1
回答已采纳
2回答
我已经创建了自己的React，但是当我使用来自自定义钩子的函数时，我有React Hook useEffect has a missing dependency: 'setPlayer'. Either include it or remove the dependency array警告。我尝试从钩子中提取函数以避免在每次呈现时创建一个新的函数实例，也尝试了useCallback，但仍然存在相同的问题。
当我使用useReducer时，我可以在没有任何警告的情况下在我的useEffect中使用dispatch，到底有什么区别呢？
我的习惯与警告挂钩：
export funct
浏览 3提问于2021-10-07得票数 0
回答已采纳
1回答
数据获取的自定义钩子
、、、、
我制作了这个自定义钩子，使用取款器获取数据，并返回一个状态，其中包含要显示在and表中的数据(喜欢它们)。我不确定这是使用钩子的正确方式，我在代码中添加了注释，我对此有疑问。
import { useEffect, useReducer } from 'react';
import { useLocation, useHistory } from 'react-router-dom';
import queryString from 'query-string'
const initialState = { data: [], loading:
浏览 1提问于2020-07-09得票数 0
回答已采纳
我经常有一个用例，其中还原器中有一些状态，并且需要在回调(useCallback)中访问它。
const [state, dispatch] = useReducer(reducer, initialState);
...
const handleAction = useCallback(()=>{
// dependency on state
},[])
为了避免在每次状态更改上运行useCallbacks，我会请求一个引用，并在每次呈现时将状态分配给它。
stateRef.current = state;
然后，无论我在回调中使用状态中的什么东西，都可以从stateRef访
浏览 2提问于2022-01-11得票数 3
回答已采纳
下面是一个使用useReducer()的简单的ToDo列表代码。
我正在尝试切换复选框。虽然代码是有效的
就概念而言，我无法理解为什么在匿名箭头函数中调用调度函数？
import initialTodos from "./Data";
import { useReducer } from "react";
const reducer = (state, action) => {
switch (action.type) {
case "COMPLETE":
return state.map((todo) =>
浏览 6提问于2022-10-03得票数 -2
我有一个useEffect，每当用户在输入中输入某项内容时，它都会触发。一开始，我用useState运行它，它运行得像黄油一样流畅，但我需要将它更改为useReducer。useEffect和useReducer：
useEffect(() => {
dispatch({type : 'username', payload : watch().username});
dispatch({type : 'password', payload : watch().password});
console.log(state.username, state.pas
浏览 2提问于2022-09-20得票数 0
回答已采纳
我想使用一个Context.Provider值来处理和分发类似的更改。我读过React阿波罗的onComplete方法，但我不确定哪种方法将涵盖更多的情况，我需要变异和调度状态。我现在拥有的是：
const CartContext = React.createContext<{
state: State
dispatch: Dispatch<AnyAction>
cartApi: any
}>({ state: initialState, dispatch: () => null, cartApi: mutateUserProductsAndUpdat
浏览 2提问于2020-02-04得票数 0
在这里，useVideos()给我们提供了数据库中的所有视频。添加新视频后，新条目不会追加到Material表中，但是如果我刷新页面，则会显示新条目。现在，我想在添加操作之后显示这个新条目。请帮我做这个！提前谢谢。
const initialState = [{}];
const reducer = (state, action) => {
switch (action.type) {
case "videos":
const data = [];
let cnt = 1;
action.value.forEach((vid
浏览 4提问于2021-09-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
