在使用useRef和useEffect反应js时，我得到了这个错误。**我如何在React中清除useEffect --这是所有问题的主要主题** Dropdown.js:9
Uncaught TypeError: Cannot read properties of null (reading 'contains')
at HTMLDocument.bodydroptoggler (Dropdown.js:9)
这是截图：
当我点击名为“下拉切换器”的按钮时，我会收到这个错误。
这是app.js的代码
import React, { useState } from
浏览 14提问于2021-12-23得票数 1
回答已采纳
我有这个React组件 import React, {useEffect, useRef, useState} from 'react';
export default function MyD3(props) {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("first log")
const interval = setInterval(() => {
console.log('This w
浏览 103提问于2021-10-27得票数 0
我正在尝试添加谷歌分析反应使用指南。
我有过
import React, { useEffect } from "react";
import ReactGA from "react-ga";
ReactGA.initialize("UA-0000000-0");
export default (WrappedComponent, options = {}) => {
const trackPage = page => {
ReactGA.set({
page,
...options
}
浏览 11提问于2020-07-30得票数 1
回答已采纳
我在页面上有一对函数组件挂钩，AddVocab组件向数组添加新单词，ListVocab映射数组。
所有操作都很好，直到我从页面导航到这个错误：
react_devtools_backend.js:3973警告:无法对未挂载的组件执行反应状态更新。这是一个非操作，但它表示您的应用程序中存在内存泄漏。若要修复，请取消useEffect清理函数中的所有订阅和异步任务。
为了修复这个内存泄漏，我尝试了许多useEffect()和清理函数的变体，但都没有效果。我知道原因是异步VocabDataService Axios调用，而不是在卸载组件时取消订阅/取消。
有人能提供正确的useEffect(
浏览 5提问于2022-04-29得票数 0
我有一个header.js组件，它存在于next.js/react项目的每个页面上。
在内部，我创建了一个打字机的旋转效果，因此为了启动它，我将代码放在useEffect中如下：
export default function Header () {
useEffect(() => {
let delay = 2200;
let input = document.getElementsByClassName('myButton')[0],
index = 0;
const cycleText = () =>{
浏览 2提问于2021-02-21得票数 2
1回答
在电子商务网站上使用react-router-dom v6。我需要处理的情况下，用户点击远离签出的中间输入信息。我想要调用一个函数，该函数在路由改变时重置签出数据。
因此，基本上，如果当前url包含"checkout"，并且url更改，则调用resetCheckout()。我将如何在反应中实现这一点？我尝试将一个useEffect()添加到我的签出路由中，该路径将window.location.href作为依赖项。这是行不通的。我假设是因为url在调用效果之前被更改了？有人知道怎么做吗？为了清晰起见，下面是我试图在<Checkout />组件中使用的钩子：
useE
浏览 3提问于2022-09-15得票数 0
回答已采纳
2回答
我的应用程序运行良好，然后我更新了它以响应18，现在，当我从一个路由导航到另一个路由时，如果当前路由使用useEffect在加载时调用一些API，那么它就会抛出“破坏不是一个函数”。我在网上搜索过这方面的内容，但每个问题都不是关于这个问题的。也许反应18是新的，这就是为什么我找不到解决办法。尽管当我重新加载相同的页面时，它的加载非常完美。我只是在应用程序崩溃时导航。如果我评论useEffect，一切都很好
这是我的useEffect代码
//on mount useEffect
useEffect(async () => {
getCases()
}, []);
/
浏览 22提问于2022-04-06得票数 4
回答已采纳
1回答
您好，我在我的useEffect中遇到了内存泄漏，我收到了这个错误“警告:无法在未装载的组件上执行React状态更新。这是一个禁止操作，但它表明您的应用程序中存在内存泄漏。要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务。”
当我从后台发出消息时，我正在尝试更新我的消息状态。
我的代码如下所示
useEffect(() => {
socket.on("message", data => {
setMessages(prevVal => [...prevVal, {
浏览 25提问于2021-02-25得票数 0
回答已采纳
我使用的是React的严格模式，而且我有一个useEffect，它会让我头疼。React严格模式的一部分是，这些东西可以触发两次，所以我正在编写代码以保护自己不受此影响。
然而，在使用useReducer时，我似乎遗漏了一些东西。通过使用useState，我能够更新状态，从而使useEffect成为幂等函数。
使用useReducer，我发出一个似乎只在useEffect呈现两次之后才执行的操作，从而有效地抵消了我的幂等性。
useState示例(请原谅React设置cruft，StackOverflow不支持本机React 18 )：
const { StrictMode, useSta
浏览 37提问于2022-10-08得票数 1
2回答
这是一个更简洁的版本。希望它能得到更好的解释和理解。
这是一个小应用程序，有3个输入，期望数字(请忽略，你也可以键入非数字，这不是重点)。它计算所有显示的数字的和。如果用另一个数字更改一个输入，则更新和。
这是它的代码：
import { useCallback, useEffect, useState } from 'react';
function App() {
const [items, setItems] = useState([
{ index: 0, value: "1" },
{ index: 1, value:
浏览 1提问于2021-09-20得票数 3
回答已采纳
我正在尝试使用firebase在react原生上构建一个简单的身份验证应用程序。在App.js文件中，我使用useEffect钩子在我的应用程序中初始化firebase实例，并且还声明了一个函数，用于在用户登录或注销时更新本地状态(loggedIn)。当我尝试使用电子邮件和密码登录时，我可以显示注销按钮，但弹出以下警告消息：
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your
浏览 27提问于2020-03-02得票数 0
1回答
如何观察一个JSX元素是否挂载。例如，我有一个带有useEffect的简单组件。它在我的App.js中，我可以挂载和卸载我的组件，如果它被挂载或卸载，该组件中的useEffect将记录下来。但我不知道是否有办法用JSX元素。例如，我们可以在不创建组件的情况下为App.js中的App.js标记实现这一点吗？
App.js
import React, { useState } from "react";
import "./App.css";
import Mycomponent from "./Mycomponent";
const App = (
浏览 7提问于2021-12-14得票数 0
回答已采纳
在下面使用的useEffect钩子中，我正在检测窗口宽度，如果窗口是一定宽度，则函数设置状态，但在这种情况下需要清除useEffect，还是不需要清理？我知道在API上下文中，您可以在返回中取消对API的订阅，所以当组件un挂载时，返回将运行。
再次设置windowWidth是正确的，还是完全从useEffect钩子中删除返回更好？
const [windowWidth, setWindowWidth] = React.useState<number>(0);
const [column, setColumn] = React.useState<number>(10);
浏览 4提问于2022-01-06得票数 0
回答已采纳
1回答
如何修复错误：Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
这是密码：
useEffect(() => {
let ignore = false;
浏览 6提问于2021-01-27得票数 0
回答已采纳
2回答
我有下面的组件，在这里我显示消息5秒，然后从主页中删除它。
当我在页面之间切换时，有时会出现错误。如有任何建议，请
index.js:1 Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup fu
浏览 4提问于2020-10-10得票数 4
回答已采纳
3回答
专家们，请解释一下，为什么在下面的代码中，属性的状态不会在useEffect清理函数中被清除？
我的组成部分：
export default function TestComp() {
let { id } = useParams();
const [value, setValue] = useState(null);
console.log('[TestComp] called...');
const cleanup = () => {
console.log('[TestComp] old value', value);
浏览 0提问于2019-12-10得票数 2
回答已采纳
我想在这个飞溅的屏幕上显示至少5秒的活动指示器。我尝试过setTimeOut方法，但它不起作用。它很快就消失了，并显示了这个警告。
警告:无法对未挂载的组件执行反应状态更新。这是一个非操作，但它表示您的应用程序中存在内存泄漏。若要修复，请取消useEffect清理函数中的所有订阅和异步任务。在src/screens/SplashScreen.js:15:15在setTimeout$argument_0中
这是我的代码，我如何解决这个问题？
import React, { useEffect, useState } from 'react';
import { Activity
浏览 10提问于2022-02-10得票数 0
回答已采纳
我使用axios从API中获取一些数据，但是所有的请求都不是在useEffect函数中。更重要的是，我并没有使用整个useEffect。
下面是我的代码的一部分：
联署材料X：
<form onSubmit={onSubmitLogin}>
<div className="form sign-in">
<h2>Hello again,</h2>
<div className="div-label">
<label>
浏览 4提问于2019-12-06得票数 0
useEffect调用列表的主表数据，如。国家和地点。我使用的是空的依赖列表，这样它只会在挂载后加载。但是错误显示清理没有正确完成，从而导致内存泄漏。 这是我在控制台中看到的错误。 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a use
浏览 57提问于2021-02-25得票数 0
回答已采纳
我在练习AWS的科尼图。对于前端，我使用的是React，对于路由，我使用的是反应性路由器-dom。对于认知验证，我使用的是包。我的Congito signin、signup和confirmation逻辑工作得很好。在验证Congnito的过程中，我创建了一个助手函数。并在不同的组件中重用它。我把我的Nav棒分成两个部分。从Congnito当前用户，我创建了一个回调函数，并在useEffect中使用它，依赖项将回调函数放入其中，默认情况下，getAuthenticatedUser为null。如果getAuthenticatedUser然后重定向到signin和signup页面，则添加获取数据的条
浏览 5提问于2021-02-11得票数 1
回答已采纳
我有下面的用户发布列表的API
[
{
"id": 24,
"url": "http://blablabla/api/v1/postdetail/24"
},
{
"id": 23,
"url": "http://blablabla/api/v1/postdetail/23"
},
{
"id": 22,
"url": "ht
浏览 4提问于2021-01-15得票数 1
回答已采纳
我的React应用程序出错了。
警告:无法对未挂载的组件执行反应状态更新。这是一个非操作，但它表示您的应用程序中存在内存泄漏。若要修复，请取消useEffect清理函数中的所有订阅和异步任务。
在LayoutLogin (at AppContent.js:22)
(在AppContent.js:22)
据我所知，这是因为一旦组件LayoutLogin看到您经过身份验证并将您重定向到您应该访问的页面，它就会被卸载。但我不知道如何修复它，因为我没有看到任何异步函数正在被调用，这就是我搜索的所有内容都被用作如何修复的示例。那我该怎么阻止这个记忆泄漏呢？
AppContent.js
export d
浏览 1提问于2020-03-14得票数 1
我有一个这样的错误： index.js:1警告:无法对已卸载的组件执行React状态更新。这是一个no-op，但它表明您的应用程序中存在内存泄漏。要修复此问题，请在useEffect清理函数中取消所有订阅和异步任务。在ToDoAdder (http://localhost:3000/static/js/main.chunk.js:193:3) 下面是我的代码： import React, { useState } from 'react';
import { useEffect } from 'react';
import { Trash, Pen, Chec
浏览 27提问于2021-08-11得票数 0
回答已采纳
1回答
我有父和子组件，如下所示：
父级
import React, { useEffect, useState } from "react";
import Cmp1 from "./Cmp1";
const App = () => {
console.log("render App");
const [parentState, setParentState] = useState(null);
const updateParent = state => {
setParentState(state);
};
浏览 0提问于2020-01-31得票数 1
回答已采纳
我本以为useEffect的第一个函数在第一次呈现之前被调用，但是当我调用下面的方法时，我的console.log就在返回方法调用之前，然后调用useEffect的第一个参数函数。
调用顺序：
just before render return
ImageToggleOnScroll.js:8 useEffect before setInView
ImageToggleOnScroll.js:10 useEffect after setInView
来源：
import React, {useState,useRef,useEffect} from "react";
// p
浏览 1提问于2019-03-30得票数 25
回答已采纳
我有一个函数，应该在unmount中调用。但它会在第一次挂载时调用。有什么办法可以解决这个问题吗？ import React, { useEffect, useState } from "react";
import "./styles.css";
import Modal from "./Modal";
export default function App() {
const [modal, setModal] = useState(false);
useEffect(() => {
return () =&g
浏览 23提问于2020-09-25得票数 1
回答已采纳
1回答
一个组件显示了一个值列表，我试图隐藏关于这些值是如何得到的所有信息，基本上是将状态的关注从组件本身中分离出来，这样在将来获取API数据的任何更改、使用什么存储等等都不会影响组件。
首先，这到底是一个好主意，还是应该在组件中直接处理挂载/卸载操作？
第二，如果这是一个很好的方法，我的实现如何？我在JS感觉很舒服，但不是专家
ContentList.js：
import React from 'react'
import './ContentList.css'
import { ContentCardContainer } from '../Conten
浏览 0提问于2020-12-04得票数 1
回答已采纳
2回答
我在这里创建了一个堆栈结构。如您所见，我在Home.js中使用设置间隔函数制作了一个计时器。Setinterval函数在Home.js中工作，但当我转到Details页面时，它继续工作。当我切换到详细信息页面时，我如何使它停止呢？
Router.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/st
浏览 1提问于2021-01-17得票数 1
回答已采纳
我只希望在组件卸载时清除筛选器。所以我只用useEffect()编写了清理函数。但是当我用console.log()检查它时，1也是在组件挂载后打印出来的。这条路怎么了？
useEffect(() => {
return () => {
clearFilters();
console.log(1);
};
}, []);
堆栈片段：
const { useState, useEffect } = React;
const Example = () => {
useEffect(() => {
return () =&
浏览 12提问于2022-05-25得票数 1
回答已采纳
当在名为SingleLineText TextInput的父组件中发生单击时，我试图在下面显示有一个输入字段的组件。但是，单击之后，状态不会被useState更改，因此不会显示名为useState的子组件。
SingleLineText组件之后粘贴在TextInput组件下面。
SingleLineText组件：
import React from "react";
const SingleLineText = () => {
return(
<form>
<input />
</for
浏览 1提问于2021-04-28得票数 0
回答已采纳
当尝试更改模式中的值时，会收到上述警告： 我有一个弹出窗口，当我在模式中更改国家代码字段的值时，一切都很好。但是一旦我保存或关闭了模型，状态变量的值就变得不确定了。 主模态文件： const EditDetailsModal = props => {
const dispatch = useDispatch()
const intl = useIntl()
const shouldShowModal = useSelector(selectors.shouldShowEditDetailsModal)
const name = useSelector(sel
浏览 18提问于2020-10-07得票数 0
我学习了React并拥有了这个
正如你在PromiseLoader.js中所看到的
return在useEffect中有一个永不确定的console.log(..，这是为什么？我以为JavaScript setInterval是异步的？
浏览 2提问于2021-04-12得票数 0
回答已采纳
我正在尝试学习如何使用intervalRef，我每隔100毫秒增加一次状态，但由于某些原因，它不起作用。 const {useState,useEffect,useRef} = React;
function Timer({active}) {
const intervalRef = useRef(null)
const [count, setCount] = useState(0)
useEffect(()=>{
if(active){
intervalRef.current = setInterval(()=&g
浏览 17提问于2020-01-03得票数 0
回答已采纳
2回答
我想知道在使用React钩子时清除超时/间隔的正确方法和最佳实践是什么。例如，我有以下代码：
import React, { useState, useEffect, useRef } from 'react';
const Test = () => {
const id = useRef(null)
const [count, setCount] = useState(5)
const [timesClicked, setTimesClicked] = useState(0)
if (!count) {
clearInterval(id.cu
浏览 90提问于2019-10-20得票数 4
回答已采纳
比较以下两个组成部分：
Child.js
import React, { useEffect } from "react";
function Child({ count, setCount }) { // Note: Has parameter
useEffect(() => {
setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
}, []);
return <div>{count}</div>;
}
e
浏览 5提问于2019-12-05得票数 11
回答已采纳
我一直在试图了解取消订阅(useEffect中的回调)何时会被准确调用。
这是代码链接：代码：
const { useState, useEffect } = React ;
function App() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document
浏览 5提问于2019-12-05得票数 5
回答已采纳
我目前正在处理一个音乐应用程序，在从details页面导航时会遇到内存泄漏错误消息。
当我使用后退按钮导航回我的主页时，我会在控制台中得到这条错误消息。
index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffe
浏览 6提问于2021-09-23得票数 0
我在onmousemove中注册了一个useEffect事件，如下所示。但是，为了不每次组件呈现时运行该效果，我传递给它一个空数组依赖项。但是，处理该事件的函数仍然被调用。但是函数在useEffect内部。这怎么可能？
import { useEffect, useState } from "react";
const UseEffect1 = () => {
const [X, setX] = useState(0);
const [Y, setY] = useState(0);
const handleMouseMove = (e) => {
浏览 7提问于2022-11-30得票数 1
1回答
在处理嵌套的react组件时，我很难理解协调是如何工作的。下面是我的index.js代码
import React from "react";
import { render } from "react-dom";
import { useState, useEffect } from "react";
const TodoList = ({ todos }) => {
useEffect(() => {
console.log("mounted List")
return () => {
浏览 3提问于2022-02-24得票数 0
回答已采纳
一个API调用是从useEffect()发出的，当应用程序刷新时，useEffect()被调用了两次，API调用了两次。
// App.js
import { useEffect, useCallback } from "react";
function App() {
const fetchUsers = useCallback(async () => {
try {
const response = await fetch(
"https://jsonplaceholder.typicode.com/users"
浏览 8提问于2022-07-05得票数 0
回答已采纳
在用户成功登录后，我试图路由到'/‘。
目前，在我的Login.JS文件中，我有一个handleSubmit函数，它从表单中获得结果：
async function handleSubmit(e) {
e.preventDefault()
try {
setError("")
setLoading(true)
await login(emailRef.current.value, passwordRef.current.value)
his
浏览 12提问于2022-02-06得票数 0
回答已采纳
我有一个react组件表单，它有文本字段和dropzone下拉区域。当我更新文本字段时，组件不会卸载，但是当我将文件拖到下拉区域或打开文件对话框并选择文件时，组件就会卸载。我使用React的useEffect。
useEffect(() => {
if(onDropProp) {
onDropProp();
}
let message = snackBarMessage;
if(droppedFileObjects.length > 0) {
setFileObjects([...fileObjects, ...droppedFileObjects
浏览 0提问于2019-08-16得票数 0
回答已采纳
2回答
ProductTable.js
从“react”导入React，{ useEffect，useState }；
function ProductTable() {
useEffect(() => {
fetchData();
}
const fetchData = () => {
axios
.get("http://localhost:4000/api/products/product/viewAllProduct")
.then((res) => {
const getData = res.d
浏览 7提问于2022-11-08得票数 0
我有个问题。我正在开发一个nextJS应用程序。反应呈现我的组件两次。我知道这是因为StrictMode。但在React和nextJS文档中，我发现它们强烈建议我们使用StrictMode。但是在我正在开发的应用程序中，我使用了useEffect，我希望useEffect中的一些代码只运行一次，而不是两次！因为在那里运行两次代码，就会成为一个很坏的错误。那我该怎么做呢？我怎样才能让react在useEffect中运行一些代码呢？我把[]作为useEffect的依赖项，但是它不起作用！例如，如下所示：
`//inside a component that is a child of React.
浏览 15提问于2022-04-26得票数 1
回答已采纳
早上好!
我正在启动react钩子，但是当我想要使用useEffect时，它抛出了以下错误：
Line 4:5: React Hook "useEffect" is called in function "profile" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
代码如下：
profile.js
import React, { useEffect } from 'react';
浏览 2提问于2020-09-26得票数 2
我正在探索如何使用钩子来响应上下文，并注意到为什么我的自定义路由每次发生上下文状态更改时都会重新呈现。在我的示例中，我创建了一个具有useReducer钩子的上下文提供程序，该钩子可以切换加载状态。
我在路上学到了这个，
当所提供的值发生更改时，提供程序将导致其使用者重新呈现。
但是，当上下文在常规父组件中使用时，它不会重新呈现。
下面是解决这个问题的。
index.js
import React from "react";
import ReactDOM from "react-dom";
import Provider from './Pr
浏览 1提问于2020-12-01得票数 1
回答已采纳
我一直试图为在Reactjs中具有给定ID的用户从Firestore中获取帖子，但没有成功。我一直从控制台得到这个错误；
App.js:64 Uncaught (in promise) TypeError: (0 , firebase_firestore__WEBPACK_IMPORTED_MODULE_12__.getDocs)(...).where is not a function
at getPost (App.js:64:1)
at App.js:69:1
at invokePassiveEffectCreate (react-dom.development.
浏览 20提问于2022-09-07得票数 0
回答已采纳
2回答
为什么这个复制在控制台上？我在处理另一个项目时注意到了这一点，并且注意到我使用jQuery添加的HTML元素的数量是预期的两倍(构建一个通知框架)。我尝试在一个新项目中重新创建这个问题，并且这种行为仍然存在。
DupeMountTest.js:
import React, {Component, useEffect} from "react";
const DupeMountTest = () => {
useEffect(() => {
console.log("useEffect")
}, [])
re
浏览 8提问于2022-09-09得票数 0
1回答
import React , {useState, useEffect} from 'react';
const Timer = () =>{
const [timer, setTimer] = useState(120);
const countTimer = () =>{
if(timer <= 0){
localStorage.clear("timer");
console.log("timer less then 0")
浏览 4提问于2021-06-25得票数 1
回答已采纳
1回答
我在一个反应组件中有一个画布。我使用了react来访问节点，并向节点添加了一个破坏()方法。相反，我得到了一个错误
TypeError: canvasRef.current.destroy is not a function
我们如何使用react访问节点(画布)并销毁该画布？
import React, { useEffect } from "react";
import Chart from "chart.js";
export default function WaterFallChart() {
const canvasRef = React.us
浏览 0提问于2021-07-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
