use-effect相关内容
我正在尝试在作为 react-hook 的功能组件中进行 API 调用,并根据结果重新呈现组件的内容.代码如下: 调用 API 的组件- function IntegrationDownshift() {使成为({setResults(inputValue).map((建议,索引)=>渲染建议({建议,指数,itemProps: getItemProps({物品:建议.userF
..
使用常规 React 可能会有这样的事情: class NoteEditor 扩展 React.PureComponent {构造函数(){极好的();this.state = {noteId: 123,};}componentWillUnmount() {logger('此笔记已关闭:' + this.state.noteId);}//... 加载和保存笔记的更多代码} 在 React Ho
..
在丹·阿布拉莫夫 (Dan Abramov) 的这个回答中,我发现了以下内容: React 是否保持状态更新的顺序? 目前(React 16 及更早版本),默认情况下仅对 React 事件处理程序内部的更新进行批处理. 有一个不稳定的 API 可以在您需要的极少数情况下强制在事件处理程序外部进行批处理. 他还在这个 Github 问题中提到了这一点: https://git
..
我有 React Native 应用程序,我通过 fetch 从 API 获取数据.我创建了从 API 获取数据的自定义钩子.我需要每 5 秒重新渲染一次.为此,我将我的自定义钩子包装到 setInterval 并且在我的应用程序变得非常缓慢并且当我导航到另一个屏幕时出现此错误后: 无法对卸载的组件执行 React 状态更新.这是无操作,但它表示您的应用程序中存在内存泄漏.修理,在 useE
..
我是 React 钩子的新手,我有一个钩子函数,它从 API 接收一系列数据以显示在列表中: function useJobs() {const [jobs, setJobs] = React.useState([])const [locations, setLocations] = React.useState({})const [部门,setDepartments] = React.useS
..
错误:警告:超出最大更新深度.当组件在 useEffect 中调用 setState 时,可能会发生这种情况,但 useEffect 要么没有依赖项数组,要么每次渲染时依赖项之一发生变化. const [products, setProducts] = useState([]);useEffect(() => {setProducts(getCartProducts());}, [产品]);
..
我有一个使用 useState 初始化状态的功能组件,然后通过输入字段更改此状态. 然后我有一个 useEffect 钩子模拟 componentWillUnmount,以便在组件卸载之前,将当前更新的状态记录到控制台.但是,记录的是初始状态而不是当前状态. 这是我正在尝试做的事情的简单表示(这不是我的实际组件): import React, { useEffect, useStat
..
我正在尝试为自己开设某种在线商店,但遇到了问题.我想在 NavBar 组件(每个页面上都有)中呈现我的购物车大小. 我创建了一个 Cart Items 服务,用于放置我添加的所有项目,它还具有 addItem、removeItem、getCart、getCartSize. 当我单击特定产品上的添加/删除时,我希望 NavBar 上带有购物车大小的值会根据购物车大小(来自 getCart
..
我有一个看起来像这样的组件: const MyComponent = props =>{const { 检查,onChange,id } = props;const [isChecked, setChecked] = useState(false);useEffect(() => {onChange &&onChange({ isChecked: !!checked, id });设置检查(检查
..
我一直在学习 React,我读到从 useEffect 返回的函数是为了进行清理,而 React 在组件卸载时执行清理. 所以我对它进行了一些试验,但在下面的示例中发现,每次组件重新渲染时都会调用该函数,而不是仅在从 DOM 卸载时调用该函数,即 console.log("unmount"); 每次组件重新渲染时. 这是为什么? function something({ setSho
..
我认为 useEffect 钩子在每次渲染后运行,如果提供了一个空的依赖数组: useEffect(() => {performSideEffect();}, []); 但是这和下面的有什么区别? useEffect(() => {performSideEffect();}); 注意末尾缺少 [].linter 插件不会发出警告. 解决方案 不太一样. 给它一个空数组就像 c
..
我只希望useEffect在我的依赖列表改变时运行,它也在每次挂载组件时运行,有什么办法不挂载时触发吗? 如果某些值,你可以告诉 React 跳过应用效果在重新渲染之间没有改变. 我最初认为这意味着它不应该在后续装载时重新渲染,但 这个问题澄清了这一点. 我在主“页面"(react-router)中显示记录列表,用户可以选择单个记录并转到详细信息页面,然后返回到主页面 - 所以主
..
每次执行 onClick 时,我都会收到一条关于内存泄漏的警告消息.如何使用 useEffect 钩子从我的功能组件中的 Context.Consumer 取消订阅组件? 我没有找到取消订阅 AppContext 的方法.AppContext.unsubsribe() 不起作用. import React, {useState, useContext} from 'react';从'rea
..
根据此 codesandbox 我试图通过使状态发生变化来更改地图的左侧或右侧,但是当我更改地图时,它会更改整个地图图块.任何想法建议将不胜感激. 解决方案 我认为您的代码过于复杂,因此我将提供一个简单的示例,您可以根据自己的代码进行调整. 您只需执行两个步骤即可实现目标. 页面登陆时并排存储传单实例. 使用它来调用 setLeftLayers ,该方法可以正常工作 在
..
除了useEffect之外,我还有一个props依赖项(setIsValid).当我将此依赖关系添加到useEffect时,它会陷入无限循环. 调用子组件时的父项: const setIsValid =(bool)=>{const tmpStateCopy = Object.assign({},state);tmpStateCopy.isValid = bool;setState(tmp
..
更新:对于用例1,是的,如果我在useEffect之外提取search.value并将其用作依赖项,那么它将起作用. 但是我下面有一个更新的用例 用例2 :我想将searchHits对象传递给服务器.服务器随后将其以更新的值返回给我,以作为响应.如果我尝试使用searchHits对象,仍然会遇到无限循环 状态:{可见:正确,载入中:false,搜索: {价值: "",searchHi
..
我正在使用useEffect挂钩从天气api获取数据,并正确声明依赖项.我的状态仍然没有更新,因此我的渲染函数出现错误.我已经做了很多尝试,从摆脱依赖关系数组到在依赖关系数组中声明倍数.我不知道我的功能出了什么问题.API的JSON响应采用以下格式: {地点: {名称:“巴黎",地区:“法兰西岛",},当前的: {last_updated_epoch:1564279222,last_updat
..
因此,当使用 useEffect 调用依赖于状态的函数时,我会遇到以下情况. 示例: //内置APP组件const [someState,setSomeState] = React.useState(0);const [someTrigger,setSomeTrigger] = React.useState(false);函数someFunction(){返回someState +1;}R
..
我正在使用Firestore存储消息.为了优化移动应用程序的性能,我想在Firestore查询中设置一个limit(50).它运行良好,并实现了道具中可用的onLoadEarlier React-native-gifted-chat. 一切正常. 但是,当我在聊天室中发送新消息时,向上滚动以查看较早的消息后,只有50条带有新消息的消息(当然是不正确的)可用. 因此,每次我在Fir
..
我认为useeffect仅在渲染之后被调用一次,但是它被执行了多次,而不是按照我期望的顺序执行.我希望在获取过程中将其发送到味精“数据加载",然后一旦获取完成,则渲染标题字段并发出"..完成..."警报.一次,那应该是结局.我在两点添加了ALERT和控制台日志来确定流量,并且警报和控制台日志都以不同的顺序出现多次.您能否运行此代码并查看其行为.我将第二个参数数组保留为null,以使其仅运行一次,但
..