react-hooks 相关问题

如何使用实用程序类实例来反应不同的组件并防止重新初始化，并且所有组件仅使用一个实例

我在单独的文件中有一个类，以及两个或多个需要使用类方法的不同反应组件 一种方法是我最初在反应组合之外创建了该类的实例...

useCallback 用于合并批量 redux 操作的函数（来自 HOC）。我应该在依赖数组中放入什么？

我有这个组件 从“反应”导入反应； 从'react-redux'导入{batch}； 常量上下文菜单 = ({ 菜单数据， 开了， 更改为菜单打开， 更改资产类型， })...

如何在react+react router dom中使用createBrowserRouter？

在我的应用程序中，我使用 BrowserRouter 组件来渲染我的路由或组件。但我想使用加载程序功能。但我目前的方法无法使用该功能。 <

为什么react js中没有调用loader函数？

我正在使用react router dom loader功能 https://reactrouter.com/en/main/route/loader 我正在使用react router dom loader功能 https://reactrouter.com/en/main/route/loader <BrowserRouter> <Routes> <Route path={'/ap'} loader={() => { console.log('0000'); return 'ss'; }} element={<App />} ></Route> </Routes> </BrowserRouter> 当我检查控制台时，它没有被调用，或者换句话说，消息没有被打印。 这是我的代码 https://stackblitz.com/edit/vitejs-vite-6gg4ab?file=src%2FApp.tsx,src%2Fmain.tsx&terminal=dev function App() { const [count, setCount] = useState(0); const data = useLoaderData(); console.log('----s', data); return ( <> <div> <a href="https://vitejs.dev" target="_blank"> <img src={viteLogo} className="logo" alt="Vite logo" /> </a> <a href="https://react.dev" target="_blank"> <img src={reactLogo} className="logo react" alt="React logo" /> </a> </div> <h1>Vite + React</h1> </> ); } 我正在尝试在路由之前获取一些数据..不知道我在哪里。我做错了 路由加载器仅在使用数据路由器时起作用，例如使用 createBrowserRouter、createMemoryRouter 等创建的路由器。如果您想使用数据 API，那么您需要转换为数据路由器。 示例： import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route, } from 'react-router-dom'; const router = createBrowserRouter( createRoutesFromElements( <Route path="/ap" loader={() => { console.log('0000'); return 'ss'; }} element={<App />} /> ) ); ... <RouterProvider router={router} /> 欲了解更多信息，请参阅： 选择路由器 路线loader

自动化幻灯片放映以防止 React 中过多重新渲染的正确方法是什么

我确信我只是有点愚蠢，但我一生都无法弄清楚这一点。我正在使用 swr 从 api 路径获取一些数据（id、标题、幻灯片等），进展顺利......

对于 redux 工具包突变来说，useQueryState 相当于什么？

您可以使用 redux 工具包钩子 useQueryState 从 redux 存储获取数据 https://redux-toolkit.js.org/rtk-query/api/created-api/hooks#usequerystate const useQueryStateResult = api.endpoints.get...

如何解决（而不是忽略）反应详尽的依赖 linter 规则，而不在获取数据时导致无限的重新渲染循环

在现实生活中，我可能会为此使用react-query，但为了巩固我的理解，我尝试使用 useReducer 和

随着 React 19 的引入，如何在某些值更改时实现重新获取

React 19 将引入 use hook，这将使我们能够避免所有带有状态设置的 useEffects，但是如果我们想在某些状态更改（单击按钮）时重新获取相同的值怎么办？ 例如...

React 在使用 useState 时显示错误的值

程序： const nextValue = 计数器 + limit_counter； -> 在这里，nextValue = 2 console.log("哈哈", nextValue); setCounter(下一个值); -> 计数器的 nextValue =2 控制台.log({

使用 ++ 前缀更新时 React 状态变量会抛出错误

我对 React 和 JS 还很陌生，只是探索语言的本质。 我正在尝试使用 ++ 运算符( 和

打字稿问题和减速器状态不会增加点击时的使用。类型“UserContextType | ”上不存在属性“状态和调度”空'

我对带有反应的打字稿很陌生，尝试了很多东西但不起作用。状态不起作用并出现打字稿错误属性“状态和调度”在类型“UserContextType |”上不存在...

调用子组件React Native（TypeScript）之前传入API数据

我正在尝试在父组件中进行 API 调用并将该数据传递给子组件，但我认为子组件在 API 调用完成之前就已渲染并且我正在接收

对象可能为“null”：TypeScript、React useRef 和 Formik innerRef

在我使用 Formik 的 React/TypeScript 应用程序中，我收到错误 对象可能为“空”。 TS2531 125 | 125 > 126 | 在我使用 Formik 的 React/TypeScript 应用程序中，我收到错误 Object is possibly 'null'. TS2531 125 | <Modal.Footer> > 126 | <Button variant="primary" type="submit" form="nicknameForm" disabled={!(formRef.current.isValid && formRef.current.dirty)}>Apply</Button> | ^ 127 | </Modal.Footer> 128 | </Modal> 129 | ) 尝试将 formRef.current.isValid 更改为 formRef!.current.isValid 并将 formRef.current.dirty 更改为 formRef!.current.dirty，但错误仍然存在。 为什么会这样，我们该如何修复这个错误？谢谢！ import React, { useState, useEffect, useRef } from 'react'; import { Button, Modal, Form } from 'react-bootstrap'; import { Formik } from 'formik'; interface IModal { show: boolean; handleClose: () => void; } export function NicknameModal({show, handleClose}: IModal) { const formRef = useRef(null); return ( <Modal show={show} onHide={handleClose}> <Modal.Header closeButton> <Modal.Title>My Title</Modal.Title> </Modal.Header> <Modal.Body> <Formik initialValues={{ nickname: '', }} innerRef={formRef} onSubmit={( values, { setSubmitting } ) => { setSubmitting(true); handleClose(); setSubmitting(false); }} > {({values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, setFieldValue }) => ( <Form id="nicknameForm" onSubmit={handleSubmit}> <Form.Group controlId="formNickname"> <Form.Label>Nickname</Form.Label> <Form.Control type="text" name="nickname" onChange={handleChange} onBlur={handleBlur} value={values.nickname} /> </Form.Group> </Form> )} </Formik> </Modal.Body> <Modal.Footer> <Button variant="primary" type="submit" disabled={!(formRef.current.isValid && formRef.current.dirty)} form="nicknameForm">Apply</Button> </Modal.Footer> </Modal> ) } 更新： 如果将 const formRef = useRef(null); 更改为 const formRef = useRef();，我们现在会遇到不同的错误： Type 'MutableRefObject<undefined>' is not assignable to type '((instance: FormikProps<{ nickname: string; }> | null) => void) & MutableRefObject<undefined>'. Type 'MutableRefObject<undefined>' is not assignable to type '(instance: FormikProps<{ nickname: string; }> | null) => void'. Type 'MutableRefObject<undefined>' provides no match for the signature '(instance: FormikProps<{ nickname: string; }> | null): void'. TS2322 71 | nickName: '', 72 | }} > 73 | innerRef={formRef} | ^ 74 | onSubmit={( 75 | values: Values, 76 | { setSubmitting }: FormikHelpers<Values> 您需要设置 useRef 的类型，其中 FormValues 是您的表单值 type FormValues = {}; useRef<FormikProps<FormValues>>(null); https://github.com/formium/formik/issues/2600#issuecomment-693479057 尝试： import { FormikProps } from "formik"; const formRef = useRef<FormikProps<any>>(null); 首先，您需要为Formik初始值定义一个类型： interface HelpFormInitialValues { destination_city: string; cell_phone: string; } const initialValues: FormnameInitialValues = { cell_phone: "", destination_city: "", }; 然后为 ref 状态定义一个表单类型，并将表单初始值类型设置为它： import { FormikProps } from "formik"; const formikRef = useRef<FormikProps<HelpFormInitialValues>>(null); 现在您可以在 Formik 状态下使用 ref 的所有属性，而不会出现任何 typescript 错误，并且还可以获得自动完成的好处。 if (formikRef.current) formikRef.current.resetForm(); if (formikRef.current) formikRef.current.isValid();

想了解usecallback中的依赖关系

const [balance, setBalance] = useState(); const pollBalance = useCallback(async (provider, 地址) => { if（提供商&&地址）{ const newBalance = 等待提供...

如何清理useCallback中的事件监听器

const ref = useCallback((节点) => { 如果（节点）{ // ...路口观察者代码放在这里 } }, []); 返回 我使用 useCallback 钩子来设置交叉观察器 li... const ref = useCallback((node) => { if (node) { // ...intersection observer code goes here } }, []); return <div ref={ref} /> 一旦 useCallback 的节点可用，我就使用 ref 钩子来设置交叉观察者侦听器。我的问题是组件卸载时杀死相交观察者的正确方法是什么？ 将您的听众移至 useEffect 挂钩

ReactJS：useMemo 挂钩修复了我的无限重新渲染问题，而不是 useEffect

不使用 useMemo ：无限重新渲染组件 我在成功编译下面的代码时遇到问题，但无限次地重新渲染组件，并且在控制台中收到此错误：警告：Ma...

React usecallback 不遵守子函数引起的依赖关系更改

希望有人能帮助我，我将非常感激。我搜索了以前回答过的问题，但找不到完全类似的东西。 简而言之： 我有一个 useCal...

useEffects 不断循环

如果这是一个愚蠢的问题，请原谅我。我是一个新的反应学习者。我正在尝试使用创建反应应用程序。我仅使用自定义挂钩进行 API 处理。现在我希望 useEffect 仅在数据存在时运行

React Hook useCallback() 与 useState var 不更新状态[重复]

我有一个反应本机应用程序，它具有布尔值来渲染某些组件，但状态未在 useCallback 中更新 导出 const Foo = (props): => { 常量值 =

反应状态变化因过滤某些数据而受到阻碍[重复]

我的 React 应用程序遇到一个问题，即成功删除操作后状态 (deleteSuccess) 没有更新。 我有一个函数handleDeleteSubmit，当...