use-effect相关内容

反应钩子“useState"在函数“setResults"中调用它既不是 React 函数组件,也不是自定义的 React Hook 函数

我正在尝试在作为 react-hook 的功能组件中进行 API 调用,并根据结果重新呈现组件的内容.代码如下: 调用 API 的组件- function IntegrationDownshift() {使成为({setResults(inputValue).map((建议,索引)=>渲染建议({建议,指数,itemProps: getItemProps({物品:建议.userF ..
发布时间:2021-07-03 19:23:10 前端开发

对 useEffect 钩子内的多个 setState() 调用进行批量更新

在丹·阿布拉莫夫 (Dan Abramov) 的这个回答中,我发现了以下内容: React 是否保持状态更新的顺序? 目前(React 16 及更早版本),默认情况下仅对 React 事件处理程序内部的更新进行批处理. 有一个不稳定的 API 可以在您需要的极少数情况下强制在事件处理程序外部进行批处理. 他还在这个 Github 问题中提到了这一点: https://git ..
发布时间:2021-07-03 19:21:25 前端开发

如何在 React Native 应用程序中使用 React hook useEffect 每 5 秒渲染一次 setInterval?

我有 React Native 应用程序,我通过 fetch 从 API 获取数据.我创建了从 API 获取数据的自定义钩子.我需要每 5 秒重新渲染一次.为此,我将我的自定义钩子包装到 setInterval 并且在我的应用程序变得非常缓慢并且当我导航到另一个屏幕时出现此错误后: 无法对卸载的组件执行 React 状态更新.这是无操作,但它表示您的应用程序中存在内存泄漏.修理,在 useE ..

useEffect 模拟 componentWillUnmount 不返回更新状态

我有一个使用 useState 初始化状态的功能组件,然后通过输入字段更改此状态. 然后我有一个 useEffect 钩子模拟 componentWillUnmount,以便在组件卸载之前,将当前更新的状态记录到控制台.但是,记录的是初始状态而不是当前状态. 这是我正在尝试做的事情的简单表示(这不是我的实际组件): import React, { useEffect, useStat ..
发布时间:2021-07-03 19:19:33 其他开发

在 React 中 useEffect 在值从其他组件更改后不会更新

我正在尝试为自己开设某种在线商店,但遇到了问题.我想在 NavBar 组件(每个页面上都有)中呈现我的购物车大小. 我创建了一个 Cart Items 服务,用于放置我添加的所有项目,它还具有 addItem、removeItem、getCart、getCartSize. 当我单击特定产品上的添加/删除时,我希望 NavBar 上带有购物车大小的值会根据购物车大小(来自 getCart ..
发布时间:2021-07-03 19:19:30 前端开发

为什么每次渲染都会调用来自 `useEffect` 的清理函数?

我一直在学习 React,我读到从 useEffect 返回的函数是为了进行清理,而 React 在组件卸载时执行清理. 所以我对它进行了一些试验,但在下面的示例中发现,每次组件重新渲染时都会调用该函数,而不是仅在从 DOM 卸载时调用该函数,即 console.log("unmount"); 每次组件重新渲染时. 这是为什么? function something({ setSho ..
发布时间:2021-07-03 19:16:55 前端开发

停止 useEffect 在挂载上运行

我只希望useEffect在我的依赖列表改变时运行,它也在每次挂载组件时运行,有什么办法不挂载时触发吗? 如果某些值,你可以告诉 React 跳过应用效果在重新渲染之间没有改变. 我最初认为这意味着它不应该在后续装载时重新渲染,但 这个问题澄清了这一点. 我在主“页面"(react-router)中显示记录列表,用户可以选择单个记录并转到详细信息页面,然后返回到主页面 - 所以主 ..
发布时间:2021-07-03 19:15:15 其他开发

如何在左侧并排或传单拆分图中更改平铺层

根据此 codesandbox 我试图通过使状态发生变化来更改地图的左侧或右侧,但是当我更改地图时,它会更改整个地图图块.任何想法建议将不胜感激. 解决方案 我认为您的代码过于复杂,因此我将提供一个简单的示例,您可以根据自己的代码进行调整. 您只需执行两个步骤即可实现目标. 页面登陆时并排存储传单实例. 使用它来调用 setLeftLayers ,该方法可以正常工作 在 ..

React Hooks:将对象作为useEffects中的依赖项进行处理

更新:对于用例1,是的,如果我在useEffect之外提取search.value并将其用作依赖项,那么它将起作用. 但是我下面有一个更新的用例 用例2 :我想将searchHits对象传递给服务器.服务器随后将其以更新的值返回给我,以作为响应.如果我尝试使用searchHits对象,仍然会遇到无限循环 状态:{可见:正确,载入中:false,搜索: {价值: "",searchHi ..
发布时间:2021-05-19 20:35:29 前端开发

提取api时未调用useEffect且未更新状态

我正在使用useEffect挂钩从天气api获取数据,并正确声明依赖项.我的状态仍然没有更新,因此我的渲染函数出现错误.我已经做了很多尝试,从摆脱依赖关系数组到在依赖关系数组中声明倍数.我不知道我的功能出了什么问题.API的JSON响应采用以下格式: {地点: {名称:“巴黎",地区:“法兰西岛",},当前的: {last_updated_epoch:1564279222,last_updat ..
发布时间:2021-05-19 20:32:17 前端开发

使用Cloud Firestore分页进行React-Native-gifted聊天

我正在使用Firestore存储消息.为了优化移动应用程序的性能,我想在Firestore查询中设置一个limit(50).它运行良好,并实现了道具中可用的onLoadEarlier React-native-gifted-chat. 一切正常. 但是,当我在聊天室中发送新消息时,向上滚动以查看较早的消息后,只有50条带有新消息的消息(当然是不正确的)可用. 因此,每次我在Fir ..

UseEffect被多次调用

我认为useeffect仅在渲染之后被调用一次,但是它被执行了多次,而不是按照我期望的顺序执行.我希望在获取过程中将其发送到味精“数据加载",然后一旦获取完成,则渲染标题字段并发出"..完成..."警报.一次,那应该是结局.我在两点添加了ALERT和控制台日志来确定流量,并且警报和控制台日志都以不同的顺序出现多次.您能否运行此代码并查看其行为.我将第二个参数数组保留为null,以使其仅运行一次,但 ..
发布时间:2021-05-06 20:34:07 前端开发