react-hooks 相关问题

NextJS：避免将服务器变成客户端组件的模式

我有一个可能很常见的情况，客户端组件（CC）使用 useState 钩子有条件地渲染服务器组件（SC）。 CC 会将其导入的任何组件转换为 CC，这...

有没有办法在 ref.current 第一次可用时执行某些操作？

在 React 中，我使用 @react- Three/Fiber 来处理 3D 内容。 有很多组件不支持声明式的操作方式，需要引用和命令式代码（例如来自...的 CameraControls）

来自数据库的GET请求冲走了localStorage

我目前正在构建“To Do”网络应用程序，使用ReactJS作为前端，Django作为后端，并使用axios来获取请求。 我希望我的应用程序中有一个功能可以存储“ToDo 任务&qu...

当我输入内容时，我的文本输入会不断刷新

我的 React 本机项目中有一个 TextInput。我使用 onCHangeText={(text)=>handleChange('postText', text)} 函数来更新我在开始时设置为状态对象的 formData...

区分错误边界中的组件错误与 React.lazy 错误

我有一个关于 React.lazy() 功能的问题。我正在开发一项功能，但我陷入了困境。 我的场景 我在我所在的地方有一个设置 使用 React.lazy() 延迟加载一堆组件...

React Hook“useState”无法在顶层调用

我是反应初学者。我正在尝试使用 React-hooks 将数据库的值从一个文件发送到另一个文件，并收到以下错误，任何人都可以帮助我解决此问题吗？ 第 5:41 行：React Hook ...

仅在 dom 中的活动组件上调用自定义钩子

首先，抱歉我的标题不好。 我的目标是使用此自定义挂钩检测组件外部的点击： const useOutsideClick = (回调) => { 常量引用 = useRef();

如何使用react和zustand存储向用户显示错误

我有以下问题。我应该如何向使用 zustand 存储数据的用户显示错误？我有一个函数 showError，我通过我的 React 应用程序使用它来显示错误。 ...

在 React Context 中与全局状态交互时过度重新渲染

我正在构建一个聊天应用程序，我正在使用 ContextAPI 来保存我需要从不同的不相关组件访问的状态。 由于上下文的原因，正在发生大量重新渲染......

在React应用程序中使用某些路由时出现无效的钩子调用错误

我正在使用docker化的react+express+nginx堆栈。由于某种原因，我只能在react-router-dom v6 的几个 Route 组件中使用钩子。例子： 应用程序.jsx 我正在使用 Dockerized React+express+nginx 堆栈。由于某种原因，我只能在 Route v6 中的几个 react-router-dom 组件中使用钩子。示例： 应用程序.jsx <div className="App"> <Routes location={state?.backgroundLocation || location} > <Route path="/" element={<Layout />} > <Route index element={<TitleScreen />} /> <Route path="/salas/" element={<RoomsScreen />} /> // INVALID HOOK CALL <Route path="/como-jogar" element={<h1>Como Jogar</h1>} /> <Route path="/sala/:id" element={<RoomScreen />} /> // HOOKS WORK HERE <Route path="*" element={<h1>404</h1>} /> </Route> </Routes> ... 我试图让钩子在这个函数内工作 RoomsScreen.jsx function RoomsScreen() { const { rooms, loading, error, fetchRooms } = useGetRooms(); const handleRefresh = () => { //should refresh RoomList } return ( <> <Header title="Salas" visible={true} handleRefresh={handleRefresh} /> <RoomList rooms={rooms} loading={loading} /> <div className="flex-row m-1"> <LinkButton text="Criar Sala" to="/criar-sala" useBackground={true} /> </div> </> ) } 这是有问题的自定义挂钩 使用GetRooms.jsx const useGetRooms = () => { const [rooms, setRooms] = useState([]); // THIS IS THE INVALID HOOK const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const fetchRooms = async () => { try { const response = await getRequestWithFetch("/api/room"); setRooms(response.rooms); } catch (err) { setError(err); } finally { setLoading(false); } }; return { rooms, loading, error, fetchRooms }; }; 我做错了什么？ 我尝试过... 我检查了 package.json 并且安装正常。 我尝试使用功能组件。 我还尝试移动代码块，并尝试在树中的哪个位置调用钩子。 如果我在 RoomList （RoomScreen 的子级）内调用它，它可以工作，但我需要它更顶层。 我确实使用 json 占位符 api 制作了一个自定义挂钩的示例，如下所示： 使用GetRooms.js import { useState } from "react"; export const useGetRooms = () => { const [rooms, setRooms] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const getRequestWithFetch = async (url) => { setLoading(true); return await fetch(url) .then((res) => res.json()) .then((data) => data); }; const fetchRooms = async () => { try { const response = await getRequestWithFetch( "https://jsonplaceholder.typicode.com/todos" ); setRooms(response); } catch (err) { setError(err); } finally { setLoading(false); } }; return { rooms, loading, error, fetchRooms }; }; 应用程序.js const { error, fetchRooms, loading, rooms } = useGetRooms(); <div> {rooms.map((each) => ( <div>{JSON.stringify(each)}</div> ))} </div> <button onClick={fetchRooms}>{loading ? "Loading" : "Click"}</button> 并且没有错误，因此您需要确保您正在调用的 api 返回您需要的数据。在反应路由中的任何地方调用自定义挂钩都不会出现问题。

如何创建一个 React hook 来检测页面刷新一次并在后续安装时返回 false？

我正在尝试创建一个 React hook 来检测用户是否刚刚刷新页面。该钩子仅应在页面刷新后的第一次交互时返回 true。在后续安装中或

Ag-Grid 服务器端分页与 React：选择项目时重置网格

请转到此codesandbox示例以理解并重现以下问题。 语境 我正在使用 Ag Grid 在公共分页 API（Pokemon one）上进行服务器端分页作为解释...

在 React 中更新文本区域值

如何更新 React 中的 textarea 值？我在按钮上使用了 setState 挂钩来获取文本区域的值，但随后我无法编辑文本区域的内容，并且当我使用 defaultValue 而不是 val 时...

模块联盟 |无效的挂钩调用。钩子只能在函数组件体内调用

我正在尝试远程使用React组件，它只有简单的计数器应用程序（useState）。 以及使用 React 和 Redux 的 Host 应用程序。 远程作为一个独立的应用程序运行良好，但当它是

我尝试在React中实现搜索功能，当我清除输入时，我没有取回完整列表

搜索功能可以工作，但是当我清除输入值时，完整列表不会显示。我正在使用过滤方法，我不明白如何获取完整列表。 //灼烧...

我尝试在React中实现搜索功能，当我清除输入时，我没有取回完整列表

搜索功能可以工作，但是当我清除输入值时，列表不会显示。 我正在使用过滤方法，我不明白如何获取完整列表。请帮忙 //搜索

乐观渲染显示投票

目前，票数 {count} 没有显示在 mount 上。我使用 useEffect 获取文章，并使用 useState 将计数设置为article.votes。点击按钮两次后，票数就会上升...

数据未从 Reactjs 中的状态渲染

const DataManipulation = ({ 数据 }) => { const [taskData, setTaskData] = useState([]); const subItemMaker = (subItem, 任务) => { subItem.forEach((sub) => { 前提条件检查(...

React-hook-form 如何与其他字段交互？

所以我基本上是新的 with-react-hook-form 我创建了一个带有受控输入的表单，其中第二个输入的条件基于我的第一个输入。 我的第一个输入是持续时间，我有两个选项'

React，需要帮助防止在更新一个好友时所有其他好友组件重新渲染

我做了一些改进，用备忘录包装了所有孩子的道具，并设法减少了接收方收到消息时所有其他朋友的重新渲染，并且