是否可以在 React 的 useEffect 中使用自定义钩子?
我有一个非常基本的自定义钩子，它接受一个路径并从 firebase 返回一个文档 import React, { useState, useEffect, useContext } from 'react';从 '../sharedComponents/Firebase' 导入 { FirebaseContext };函数 useGetDocument(path) {const firebase
..
react-hooks相关内容
在 useEffect 未运行时取消 Axios 请求
我正在尝试取消 axios 请求，但我只取得了部分成功.我有这个函数在我发出 GET 请求时返回一个 Promise: const getCards = (token) =>{const URL = isDev?“https://cors-anywhere.herokuapp.com/https://privacy.com/api/v1/card":“https://privacy.com/ap
..
在函数内部使用 RTK-Query 钩子的方法?
我已经成功地使用 Axios 编写了我的应用程序来获取内容.截至目前，它已设置为在发生某些事件时获取内容(例如单击提交按钮).不过，我正在试验 Redux 的 RTK-Query 解决方案.这个包生成钩子，在他们的示例中，他们提供了简单的组件级调用挂载钩子的例子. 我如何利用这些 rtk-hooks(以及一般的钩子)，以便将它们与诸如 onClick、onSubmit 和条件事件之类的行为联
..
React Hooks 的 Keydown/up 事件无法正常工作
我正在尝试为我正在开发的游戏创建基于箭头的键盘控件.当然，我正在努力与 React 保持同步，所以我想创建一个函数组件并使用钩子.我为我的错误组件创建了一个 JSFiddle. 它几乎按预期工作，除非我同时按下很多箭头键.然后似乎没有触发某些 keyup 事件.也可能是“状态"没有正确更新. 我喜欢这个: const ALLOWED_KEYS = ['ArrowUp', 'Arro
..
useReducer 中返回参数的通用类型
我正在编写一个自定义钩子来从 API 获取一些数据.如果可能，我希望返回的数据是类型安全的.这可以用泛型来完成吗? type Action = { type: 'PENDING' } |{ 类型:'成功';有效载荷:任何 } |{ 类型:'失败' };接口状态{isLoading:布尔值；isError: 布尔值；数据:任何；}const dataFetchReducer = (state: S
..
React useEffect hook 和 Async/await 自己的获取数据功能?
我尝试创建一个从服务器获取数据的函数，它工作正常.但我不确定这是否正确? 我使用useState、useEffect 和Async/Await 创建了一个函数组件来获取数据: import React, { useState, useEffect } from "react";const Fetch = () =>{const [data, setData] = useState(nu
..
React Hooks 滚动到元素
我希望用 React 16.8.6 编写一个 React 钩子，它可以让我在单击导航项时滚动到特定的 HTML 元素部分.我有一个 Navigation 组件，它是页面上呈现的部分的兄弟. 此外，当页面滚动时，我想用该 HTML 部分更新 App 的状态. 导航组件 JSX {useEffect(() => {const element = document.getElementB
..
如何将 onchange 与自动完成材料 ui 一起使用?
使用handleChange方法处理带有钩子样式的表单输入的OnChange事件，设置对象的状态. handleChange 函数依次调用 setLocation，它用新值更新位置状态. 为了使用户数据输入更容易，我决定将城市字段更改为自动完成，但我未能捕获自动完成的值.在文档中他告诉我我需要传递两个参数但我不太明白 function(event: object, value: an
..
React hooks:如何在类组件中在构造函数中初始化的功能组件中编写变量
我在 React 中使用 uppy，它们通常将 uppy 初始化为全局变量.在 React 中，他们允许这样做: class MyComponent extends React.Component {构造函数(道具){超级(道具)this.uppy = Uppy().use(Transloadit, {})}组件将卸载(){this.uppy.close()}使成为 () {return }}
..
如何在 React Router Dom 的 useHistory 中发送参数?
我使用 React Router 钩子进行导航 useHistory. 导航:history.push("/home", { update: true }); 在家里:我正在尝试获取参数 let {update} = useParams(); 但是 update 总是未定义的.这段代码有什么问题.有什么建议吗? 解决方案 history.push() 方法中的第二个参数其
..
如何修复“警告:useLayoutEffect 在服务器上什么都不做"?
这里是完整的错误: 警告:useLayoutEffect 在服务器上什么都不做，因为它的效果无法编码到服务器渲染器的输出格式中.这将导致初始的、非水合的 UI 和预期的用户界面.为了避免这种情况，useLayoutEffect 应该只用于只在客户端呈现的组件 在 ForwardRef(ButtonBase)在 WithStyles(ForwardRef(ButtonBase))在 For
..
未找到规则“react-hooks/exhaustive-deps"的定义
在我的代码中添加 //eslint-disable-next-line react-hooks/exhaustive-deps 后，我收到以下 eslint 错误. 8:14 错误未找到规则“react-hooks/exhaustive-deps"的定义 我参考了这篇帖子来修复这但提到的解决方案在我的情况下不起作用.任何线索如何抑制这个 eslint 错误? PS 我结合
..
反应自定义钩子与普通函数，有什么区别
我正在尝试用自定义钩子包住我的头.我理解普通钩子很好，但我的问题是，在编写自定义钩子时，它与普通函数有什么区别?我的意思是为什么不把它称为普通函数而不是像 use* 解决方案 React Hooks(自定义或非自定义)应该以 use 前缀开头.以及，根据 React 文档: 1) 钩子应该只从 React 代码中调用，而不是从常规 JS 函数中调用.因此，Hooks 的范围仅限于 R
..
使用 UseState React Hook 从子组件更新父组件状态
假设我有一个这样的父组件: function Recipe(recipe) {const [pageState, updatePageState] = useState("view");返回 (
..
useEffect 中的 state 指的是始终使用 React Hooks 的初始状态
每次我从另一个组件发出消息时，我都无法获得完整的消息列表.这是钩子和视图组件: 导出函数 useChat() {const [messages, setMessages] = useState([]);useEffect(() => {const socket = openSocket("http://localhost:3003");socket.on("聊天消息", msg => {cons
..
当父状态改变时组件卸载
我使用的是 React 16.8.2，每当应用组件中的状态发生变化时，我的组件的子组件都会卸载. 场景如下: 我有 App.jsx(一个功能组件)和许多状态变量(useState) 其中一些状态变量的设置器通过上下文提供程序(后代中的 useContext)沿树向下传递 我有一个菜单组件(应用程序的后代)，它调用这些设置器来(例如)显示一个模态对话框 我有一个模态对话框组件(Ap
..
React hook useEffect 依赖数组
我试图将我的头围绕在 React 的新钩子 API 上.具体来说，我正在尝试构建曾经如下的经典用例: componentDidUpdate(prevProps) {if (prevProps.foo !== this.props.foo) {//在此处为 dom 元素设置动画...this.animateSomething(this.ref, this.props.onAnimationComp
..
什么是 useEffect 执行顺序及其在 React 钩子中的内部清理逻辑?
根据react文档，useEffect会在重新运行useEffect部分之前触发清理逻辑. 如果你的 effect 返回一个函数，React 会在需要清理时运行它...... 没有用于处理更新的特殊代码，因为 useEffect 默认处理它们.它会在应用下一个效果之前清除之前的效果... 但是，当我在useEffect 中使用requestAnimationFrame 和canc
..
带有 React useEffect 钩子的 componentWillUnmount
如何使用 useEffect 钩子(或任何其他与此相关的钩子)来复制 componentWillUnmount? 在传统的类组件中，我会做这样的事情: class Effect extends React.PureComponent {componentDidMount() { console.log("MOUNT", this.props);}componentWillUnmount()
..
我可以在 useEffect 中调用单独的函数吗?
我可以在 useEffect 中调用另一个单独的函数吗? 我正在调用 useEffect 中的另一个函数，但在保存文件后，它会自动将该函数添加到 useEffect 的数组参数中. 请参阅下面的代码以正确理解. 保存文件前: useEffect(() => {获取数据()console.log("useEffect 运行...");}， [询问]);函数 getData() {
..