首页 > TAG信息列表 > react-hooks

javascript-在useEffect中将componentDidUpdate代码与DidMount和UnMount一起使用

我正在尝试将我的代码迁移到支持react挂钩的新react上.我正在使用useReducer,useState和useEffect.我可以在代码中使用DidMount和UnMount,但对如何实现DidUpdate部分一无所知,因为这可能会导致重新渲染问题. 这是我做的 旧代码 class ImageBoard extends React.Component { co

javascript-无法在useEffect之外删除事件侦听器

我在useEffect中添加了一个事件监听器.由于useEffect第二个参数([]),它在第一次重新渲染后运行一次.然后,我尝试在useEffect(在handleSearch函数中)之外将其删除,但是它不起作用.我怀疑它与功能范围有关,但并不能完全理解它.也许有解决方法？ const handleSearch = () => { window

javascript-使用挂钩检测React组件外部的单击

我发现我正在整个应用程序中重用行为,当用户在某个元素之外单击时,我可以将其隐藏. 通过引入钩子,我是否可以将它放在钩子中并在各个组件之间共享,以免我在每个组件中编写相同的逻辑？ 我已经在组件中实现了一次,如下所示. const Dropdown = () => { const [isDropdownVisible,

带有长时间运行的任务和合并状态的React useEffect挂钩

我有一个场景,用户可以使用拖放功能上传文件. 我将效果与空的空缺数组配合使用来设置RXJS订阅,该订阅处理已删除的文件和上载时间： const [attachments, setAttachments] = useState([]) useEffect(() => { ... fileUploadSubject.subscribe(newAttachments => { s

javascript-目标DOM如何在地图中反应useRef

我正在寻找有关使用react useRef()挂钩获取DOM元素数组的解决方案. 例： const Component = () => { // In `items`, I would like to get an array of DOM element let items = useRef(null); return <ul> {['left', 'right'].map((el, i) => &l

javascript – 在React useEffect钩子中引用过时状态

我想在卸载组件时将状态保存到localStorage. 这曾经在componentWillUnmount中工作. 我试着用useEffect钩子做同样的事情,但似乎在useEffect的return函数中状态不正确. 这是为什么？如何在不使用课程的情况下保存状态？ 这是一个虚拟的例子.按关闭时,结果始终为0. import React, { useS

javascript – 使用react-hooks在更新状态时执行异步代码

我有类似的东西： const [loading, setLoading] = useState(false); ... setLoading(true); doSomething(); // <--- when here, loading is still false. 设置状态仍然是异步的,那么等待此setLoading()调用完成的最佳方法是什么？ setLoading()似乎不接受像setState()那样的回调.

javascript – React Hooks – 发出Ajax请求

我刚刚开始使用React钩子,我想知道AJAX请求应该如何看待？ 我尝试了很多尝试,但是无法让它工作,也不知道实现它的最佳方法.以下是我最近的尝试： import React, { useState, useEffect } from 'react'; const App = () => { const URL = 'http://api.com'; const [data, setD

javascript – 从组件中的useState多次调用状态更新程序会导致多次重新呈现

我第一次尝试React钩子,所有看起来都很好,直到我意识到当我获取数据并更新两个不同的状态变量(数据和加载标志)时,我的组件(数据表)呈现两次,即使两个调用状态更新程序正在发生在同一个函数中.这是我的api函数,它将两个变量都返回给我的组件. const getData = url => { const

javascript – React Hooks – 引擎盖下发生了什么？

我一直在试用React Hooks,它们似乎简化了存储状态等操作.然而,他们似乎通过魔术做了很多事情,我找不到一篇关于他们实际工作方式的好文章. 看起来很神奇的第一件事就是每次调用它返回的setXXX方法时,调用像useState()这样的函数会导致重新渲染你的功能组件吗？ 当功能组件甚至无法在M

javascript – 如何使用React useEffect仅调用一次加载函数

useEffect React挂钩将在每次更改时运行传入函数.这可以进行优化,只有在所需的属性发生变化时才能调用它. 如果我想从componentDidMount调用初始化函数而不是在更改时再次调用它,该怎么办？假设我想加载一个实体,但加载函数不需要组件中的任何数据.我们如何使用useEffect钩子来做这个

javascript – React Hook使用中的异步函数警告效果：useEffect函数必须返回一个清理函数或者什么也没有

我正在尝试下面的useEffect示例： useEffect(async () => { try { const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`); const json = await response.json(); setPosts(json.data.children.map(it => it.data)); } ca

javascript – React钩子仅在生成构建中抛出不变的违规

在使用钩子将我的投资组合从类组件迁移到功能组件的过程中,我在生产构建中遇到了一些以前没有发生过的错误.我的所有组件都是使用useState或useEffect的功能组件(错误边界除外),但看起来它们的存在导致了这个错误： “Invariant Violation: Minified React error #298; Hooks can o

javascript – 是否存在使用React hooks和Typescript定义状态的“正确”方法？

我已经和React工作了一段时间,昨天我在基于Typescript的项目中弄到了钩子.在重构之前,该类有一个这样的状态： interface INavItemProps { route: IRoute; } interface INavItemState { toggleStateOpen: boolean } class NavItem extends Component<INavItemProps, INavItemS

javascript – React Hooks异步最佳实践

现在使用useEffects,可以将componentDidMount替换为带有Hook的React组件. 场景“对服务器的初始唯一调用”： 要做到这一点,useEffect中的DependencyList(useEffect的第二个参数)应该每次都是一个空数组,否则应用程序将发送每个状态更改一个fetch调用到服务器. 这意味着,这是getData

javascript – useState set方法不会立即反映更改

我正在尝试学习钩子,useState方法让我感到困惑.我正在以数组的形式为状态分配初始值.即使使用spread(…)或没有spread运算符,useState中的set方法也不适用于我. 我在另一台PC上制作了一个API,我正在调用并获取我要设置为状态的数据. 这是我的代码： import React, { useState, useEf