如何在React onClick中删除和添加相同的事件侦听器，而不是无限堆叠？
在React中，如果要在onClick事件中删除和添加相同的事件侦听器，而不是无限堆叠，可以使用React的生命周期方法来处理。
首先，定义一个函数来处理点击事件：
handleClick = () => {
// 处理点击事件
}然后，在组件的生命周期方法中进行事件侦听器的添加和删除操作。首先，在组件挂载时添加事件侦听器，在组件卸载时删除事件侦听器。可以使用componentDidMount和componentWillUnmount这两个生命周期方法。
componentDidMount() {
document.addEventListener('click', this.handleClick);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClick);
}这样，当组件挂载时，会添加事件侦听器，当组件卸载时，会删除事件侦听器。这样就避免了事件侦听器的无限堆叠问题。
完整的示例代码如下：
import React, { Component } from 'react';
class MyComponent extends Component {
handleClick = () => {
// 处理点击事件
}
componentDidMount() {
document.addEventListener('click', this.handleClick);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClick);
}
render() {
return (
<div>
{/* 组件的内容 */}
</div>
);
}
}
export default MyComponent;这样，当点击事件触发时，会调用handleClick函数进行处理。而当组件被卸载时，会自动删除事件侦听器，避免了事件侦听器的无限堆叠问题。
在React中，如果需要在不同的组件中共享事件处理逻辑，可以考虑使用高阶组件（Higher-Order Component）或React Hooks等技术。这样可以更灵活地管理事件侦听器的添加和删除。具体的实现方法会根据具体的需求和场景而有所不同。
腾讯云提供了丰富的产品和服务来支持云计算，如云服务器、云数据库、云存储等。您可以根据具体的需求选择合适的产品。具体的产品介绍和详细信息可以参考腾讯云的官方文档：腾讯云产品文档。
相关·内容
在React中，把onClick看作是设置eventListener而不是标准的JavaScript onclick属性更好吗？
例如，考虑这两个代码片段，第一个在标准JavaScript中，第二个在React中：
<button onclick="activateLasers()">
Activate Lasers
</button>
<button onClick={activateLasers}>
Activate Lasers
</button>
在最上面的示例中，onclick与对activateLasers函
浏览 0提问于2021-02-10得票数 3
回答已采纳
1回答
我试图在单击对象时在window上添加一个事件侦听器，然后在再次单击该对象时删除该事件侦听器。
单击Card组件时，状态isCardMoving将被打开或关闭。
我添加了一个useEffect来观看isCardMoving。当isCardMoving被打开时，它应该向触发handleCardMove函数的窗口添加一个mousemove事件侦听器。这个函数只记录鼠标的坐标。
如果我再次单击卡片，isCardMoving将是假的，并且我希望在useEffect中删除窗口上的事件侦听器。
但是，所发生的情况是，当isCardMoving为true时，事件侦听器将被添加，一旦isCardMoving为
浏览 4提问于2020-10-09得票数 0
回答已采纳
我是React的新手，我正在尝试学习React函数组件状态。我想知道为什么我们需要做onClick={() => setCount(count + 1)}而不是onClick={setCount(count + 1)}
import React, {useState} from 'react';
function Counter() {
const [count , setCount] = useState(0);
return (
<div>
<button onClick={setCount(
浏览 0提问于2019-12-23得票数 2
2回答
我已经开始阅读Hooks文档，并意识到一些事情。当我直接使用useState()返回的函数时，如下所示： const [count, setCount] = useState(0);
.
.
.
<button onClick={setCount(count + 1)}>+1</button> React无限地重新渲染，并给出最大堆叠达到的误差。这一切为什么要发生？有人能给我详细解释一下吗？
浏览 25提问于2020-08-12得票数 0
回答已采纳
1回答
因此，我有一段代码，其中Header.jsx文件中有一个按钮，一旦单击，它将显示Notification.jsx文件的内容。这里的问题是，我不知道如何在index.js中显示index.js的内容。我尝试使用条件语句，但没有效果，单击按钮后是否可以隐藏h1元素？
Header.jsx
import React from "react";
import { Button } from "@mui/material";
import { IconButton } from "@mui/material";
import NotificationsIc
浏览 10提问于2022-03-15得票数 1
我正在使用react和一个使用jquery的bootstrap主题。
问题是bootstraps下拉菜单和reacts不能协同工作。
我的解决方案是在组件的componentDidUpdate()方法中使用jQuery应用onClick处理程序。这与预期的一样。
这不起作用：
<ul className="dropdown-menu pull-right">
<li id="logout-button">
<a href="#" onClick={this.logout.bind(thi
浏览 0提问于2016-10-13得票数 1
事件侦听器在卸载之前没有在useEffect中删除，为什么会发生？
import React, { useState, useEffect, FC } from 'react';
const beforeUnloadListener = (event: any) => {
event.preventDefault();
return (event.returnValue = 'Are you sure you want to exit?');
};
const OnClosePageDetector: FC = () => {
u
浏览 7提问于2022-09-06得票数 1
回答已采纳
请帮助如何在不使用click的情况下在react-project中添加react - onClick attribute事件侦听器。我只想使用原生javascript。
我试过像这样
document.addEventListener("DOMContentLoaded", function (event) {
console.log("====");
console.log(document.querySelector(".btn"));
document.querySelector(".btn").addEvent
浏览 2提问于2021-01-08得票数 0
我一直致力于学习React，并在其中使用类组件构建了一个todo应用程序。最近，我一直在使用函数和钩子来复制todo应用程序，而不是使用类。
重构了代码之后，除了一个用例之外，一切看起来都正常工作。
案例1:在输入输入并单击“添加”按钮调用addItem()时，按预期添加新的待办事项。
CASE 2:在输入输入并按enter触发事件处理程序(调用addItem() )时，的值总是与其初始值相同。
在我的一生中，我无法理解为什么addItem()在点击"Add“按钮与按下"Enter”键时的行为有所不同。
TodoAppContainer.js
import React, { u
浏览 1提问于2021-05-14得票数 2
回答已采纳
我在React (或一般的JS )中理解整个this问题时遇到了一些问题，并发现这篇非常有用的文章：
然而，有一件基本的事情我仍然不确定。
让我们以方法2为例：
// Approach 2: Bind in Render
class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = { message: 'Hi' };
}
logMessage() {
// This works because of the bind
浏览 0提问于2018-03-11得票数 1
回答已采纳
根据我看过的function文档，我想我会使用"useRef“来更新一个函数，但我不确定。我想启动一个事件来静音一个视频有一个滚动事件。现在，我正在使用onClick播放/暂停视频。
Video.js
import React, { useRef, useState } from "react";
import "./Video.css";
function Video({ url }) {
const [muted, setMuted] = useState(true);
const [playing, setPlaying] = useSt
浏览 2提问于2020-12-01得票数 1
回答已采纳
2回答
我需要知道如何使用onclick，以便它允许我一次又一次地重用div的onclick方法，而不必添加无限数量的方法。
我不想这么做：
<div id="div1" onClick="divFunction1()">
</div>
<div id="div2" onClick="divFunction2()">
</div>
<div id="div3" onClick="divFunction3()">
</div>
<d
浏览 2提问于2014-05-11得票数 0
回答已采纳
我有许多按钮，每个按钮都有一个onClick功能。onClick是否负责处理eventListener并自动将事件分配给正确的函数，或者我是否需要测试该事件是否针对我的函数？ 如果我还为单击事件添加了eventListeners，该怎么办？在这些事件侦听器中，我检查事件目标是否针对正确的函数。但React是否也会将单击传递给onClick()函数？React如何区分onClick()处理程序和addEventListener(“单击”)处理程序？ 例如，在我的类组件中，我有： export class MyPage extends React.Component {
constructor(
浏览 19提问于2021-09-26得票数 1
回答已采纳
我用的是这个：。
除了点击手风琴本身之外，还有什么方法可以编程地使手风琴的反应物化打开？
我正在尝试添加一个onClick处理程序，以便在选择了一个react物化可折叠手风琴时，我可以执行一个setState，这样我就可以根据状态来做一些事情，并将内容呈现到弹出的手风琴中(条件呈现和其他目的)。
我有3个CollapsibleItems，当页面呈现时，this.changeBoardType被调用6次，如果在其中执行setState，就会陷入无限循环：
超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUp
浏览 0提问于2018-01-25得票数 0
2回答
我正在建立一个反应应用程序，使用语义用户界面反应。我有一些缩略图，打开modal组件，以显示模态中的全尺寸图像。我也有按钮可以浏览下一页和前一页。随着按钮的点击，我想使用箭头键导航。当模态打开时，我可以将事件侦听器添加到窗口。但是，当我关闭模式并打开另一个模式时，一个重复的事件侦听器添加到窗口中。这意味着当模式关闭时，我需要删除事件侦听器。但是，语义UI React组件的onClose和onUnmount道具并不适用于删除。我怎样才能申请？removeEventListener以外的任何东西都可以在onClose或onUnmount中运行，但是removeEventListener不运行。
以
浏览 0提问于2021-03-27得票数 3
回答已采纳
2回答
React中(1)和(2)的区别是什么？
onClick={()=>handleDelete(id)} -------(1)
onClick={handleDelete(id)} ----------(2)
为什么(2)导致无限循环，而(1)工作得很好？
我在react中找不到任何关于onClick的文档，因为它只能接受函数。对于Html属性与react的不同之处，我也有点困惑，因此任何文档链接都会受到高度赞赏。
所讨论的代码片段：
<button
className="btn btn--danger"
onClick={()=>handle
浏览 5提问于2022-08-17得票数 0
回答已采纳
我有一个React函数组件，它从useState()接收一个带有变量的属性。这可以很好地工作，但是如果我在EventListener中使用它，它不会更新。我尝试了以下方法，但仍然不起作用。
也许有人能解释一下原因。
谢谢
我希望x是更新后的数字，但它始终具有EventHandler初始设置的值。
import React, { useState, useEffect } from "react";
import ReactDom from "react-dom";
const App = () => {
const [num, setNum] =
浏览 22提问于2019-07-09得票数 1
我有一个模态，它倾听模态的外部点击，触发关闭模态的关闭方法。现在，我在模态中添加了react，在选择了其中一个选项之后，它使我的模式继续接近状态。我从一篇媒体文章中捕捉到了外部点击。
function useOuterClickNotifier(onOuterClick, innerRef) {
useEffect(() => {
if (innerRef.current) {
document.addEventListener("click", handleClick);
}
return () => document.re
浏览 0提问于2019-11-20得票数 3
回答已采纳
我正在制作一个计算器，在react中，我为数字制作了按钮，当按下按钮"7“时，在输入字段中添加了7。
我的方法：
我正在使用useState来完成这个任务。我制作了一个箭头函数funinpval，它在参数中以数字作为字符串，然后通过传递相应的数字作为参数，使用这个函数使用不同的按钮onclick处理程序。但我错了
import React from 'react'
import { useState } from 'react';
export const Calculator = () => {
const [inpval,
浏览 6提问于2021-08-29得票数 1
回答已采纳
2回答
我知道，在React中处理交互的方法应该是合成事件，而不是本地dom事件，但我想知道为什么这种行为如此怪异。当React事件正常工作时，dom事件总是将状态重置为初始状态。
import React, { useState, useEffect } from "react";
import "./style.css";
export default function App() {
const [num, setNum] = useState(0);
function clickMe() {
setNum(num + 1);
}
use
浏览 0提问于2021-02-18得票数 2
回答已采纳
我正在使用React Hooks，我想这样做:我有一个按钮，当单击时，我想让它监听另一次鼠标单击，但我读到过，我不应该在函数中调用addEventListener。 我尝试在useEffect中使用addEventListener，但失败了。我希望事件侦听器仅在单击按钮时触发，但useEffect将始终在此之前运行。我不知道该怎么办。 useEffect(() = > {
document.addEventListener("click", mouseClickHandler)
return () => {
document.re
浏览 50提问于2019-12-24得票数 2
回答已采纳
如何在函数onClick div.id中获取showChildren事件的目标
预期结果：
div.id
实际结果：
<react></react>
相关Razor
iterateNavigationObject: function(item) {
var titleStyle = {
'backgroundColor': 'grey'
};
return (
<div>
<ul>
<li style={titleSt
浏览 0提问于2016-03-07得票数 3
回答已采纳
我一直在和这个虫子做斗争。我一直在获取TypeError:无法在我的react应用程序中读取null属性'classList‘。我对此反应很新，所以一直在试图解决这个问题，但没有结果。这是错误和我的组件，有人知道问题出在哪里吗？
TypeError消息为文本：
←→1 of 8 errors on the page
TypeError: Cannot read property 'classList' of null
(anonymous function)
http://localhost:3003/static/js/main.chunk.js:8044:49
浏览 4提问于2020-07-26得票数 0
1回答
我正在为我的Nav栏使用function函数，当用户单击其中一个时，它应该会自动滚动到页面的某个部分。我的代码是这样做的，但是在它实际执行操作之前有大约1.5秒的延迟。我怎么才能解决这个问题？
这是我的Navbar.js代码：
import React from "react";
import { Link } from 'react-scroll';
import { FaBars, FaTimes } from 'react-icons/fa';
import { useState, useEffect } from "react&#
浏览 7提问于2022-09-28得票数 1
我想问一个关于ReactJ中的“事件处理程序”的基本问题。
下面是一些React组件的示例：
import React from 'react'
class Hello extends React.Component {
handleClick = () => {
console.log("clicked");
}
render () {
const { isDisabled = false } = this.props;
return (
<button onClick={() => isD
浏览 6提问于2020-01-01得票数 0
回答已采纳
我的小应用程序是用React，路由器和Flux制作的。
我有两条路线：
<Route path="/" exact component={Board} />
<Route path="/table" component={Table} />
卡组件在板内呈现。卡片让onClick事件发送一个动作到存储区，发出事件"cardClicked“。板组件会听这些操作，并做一些事情：
//Board.js:
componentWillMount() {
GameStore.on("cardClicked", () =
浏览 3提问于2017-04-29得票数 3
我对这段代码的工作很好奇。
这是一个简单的代码，我打算为1提高计数器并在控制台上打印。
但是当我点击这个按钮时，计数器就会增加，也会从0打印到我增加的所有数字。
你能解释一下为什么会这样吗？
import { useState } from "react";
function App() {
const [counter, setCounter] = useState(0);
const onClick = () => {
window.addEventListener("click", () => {
consol
浏览 0提问于2021-07-16得票数 1
回答已采纳
我正在处理一个组件存根，其中我有一个瓷砖网格，每个块都需要一个单击处理程序，还有一个具有不同单击处理程序的特定“新”瓷砖。我试图让点击处理程序正常工作，但事件似乎从未触发。
有什么想法吗？
var grid = React.createClass({
onCreateNew: function () {
console.log("onCreateNew");
},
render: function () {
var tiles = [];
if (this.props.items) {
浏览 4提问于2014-06-20得票数 4
回答已采纳
我尝试用其他onclick事件替换onclick事件，使用javascript：
<button id='myButton' onClick=""/>
旧onClick事件:
$('#myButton').click(function(){
alert('1');
});
，然后我做同样的操作，并更改警告的值，我喜欢这样做:
$('#myButton').click(function(){
alert('2');
});
以上方法的结果是，对1和2进行两次警报显示。我只
浏览 1提问于2017-04-13得票数 0
回答已采纳
因为我们直接将onClick处理程序添加到组件中..。例：
<button onClick={dosomething}>Click</button>
在处理数十个元素时，是否有一种有效的方法(不向每个元素添加一个onClick )？
例如，在我的骨干应用程序中，我只需将一个处理程序应用于一个类：
events:
'click .someclass': 'doSomething'
主干道似乎要干净得多，而且更容易管理。有什么方法可以用React组件来模拟这种行为吗？
为了添加一些透视图，我已经说了十几个或更多的表单元素，当它们中的任何一个
浏览 4提问于2015-05-22得票数 6
回答已采纳
我对react和JavaScript非常陌生，这是我学习react的第二周。我现在遇到了事件传播问题。我试图访问子级中的onClick，但事件目标似乎在本身中。我找不到简单的解决方案。请帮助，非常感谢提前。 return (
{loading ? ("...loading...") : data.map(({id,project_title,project_subtitle, project_description,image_url,link},index) => (
<React.Fragment>
浏览 32提问于2021-04-09得票数 0
我想知道，是否可以只为1个组件运行脚本？ 在我的代码中，我导入了5个组件 import React from 'react';
import Intro from './includes/Intro';
import Counter from './includes/Counter';
import Feedback from './includes/Feedback';
import FeedbackAll from './includes/FeedbackAll';
import Faq from
浏览 17提问于2019-01-22得票数 1
回答已采纳
我正在使用React和Material-UI。我正在尝试显示一个列表，并在单击列表中的某一项时调用函数。下面的代码是我的代码的简化版本，但它应该包含与该问题有关的所有行。onClick函数显然从未被调用过。我遗漏了什么？
App.js：
import React, { Component } from 'react';
import './App.css';
import Grid from '@material-ui/core/Grid';
import Map from './Map.js';
class App exten
浏览 20提问于2019-03-29得票数 2
回答已采纳
3回答
在进入事件处理部分之前，我一直在阅读文档并练习React文档中的一些内容。但是我不明白为什么在类组件中使用方法时我们必须绑定函数，有人能解释一下吗？例如：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleC
浏览 9提问于2022-06-15得票数 0
1回答
在搜索主题"“之后，我无法找到提高当前应用程序性能的解决方案。
Context：我有多个React组件：
- **App**: root component, has **`itemSelecting`** state to detect current item selecting (`FirstComponent` or `SecondComponent`, two different components). It has an **`mousedown/mouseup`** event listener to detect outside click `FirstC
浏览 5提问于2019-10-10得票数 1
回答已采纳
我想创建一个简单的应用程序，我可以选择铅笔，画笔和橡皮擦。我有Home.js和addLine.js。但是有一个我无法修复的bug。当我从画笔换回铅笔时，我是在用铅笔作画，但在铅笔画的周围有一个类似边框的东西，它采用了我以前用于画笔的颜色。如果重要的话，我使用react颜色进行颜色选择。
const Home = () => {
const stageEl = React.createRef();
const layerEl = React.createRef();
const [color, setColor] = useState('');
浏览 35提问于2020-09-04得票数 0
我试图在React中添加一个事件侦听器到图标中，但它不起作用。我的代码：
const handleKey = (event) => {
console.log(event);
}
<MdOutlinePause onKeyDown={handleKey} />
我还有一个onClick处理程序，它的功能也很好，所以我真的不明白为什么onKeyDown不启动。感谢任何人能提供的任何帮助！
浏览 9提问于2022-04-11得票数 3
回答已采纳
1回答
我遇到了一个我不太明白的问题。我正在构建一个Wordle克隆，状态似乎在更新某些事件，而不是其他事件，而我无法很好地跟踪原因。
我有一个Keyboard组件，它将handleKeyClick作为父组件的支柱，并附加到两个事件处理程序。
父组件
import { Box, Divider, Grid, Typography } from "@mui/material";
import { useState, useEffect, useCallback } from 'react';
import Keyboard from "../Keyboard
浏览 1提问于2022-02-06得票数 2
虽然我知道这个问题已经问了很多次了，但通常的答案是“你在传递一份副本，而不是原件”。除非我理解错了，否则这不是我的问题。
我使用以下代码创建了React模式：
const Modal: React.StatelessComponent<Props> =
({ isOpen, closeModal, closeOnClick = true, style, children }: Props) => {
const closeOnEsc: (e: KeyboardEvent) => void = (e: KeyboardEvent) => {
e.st
浏览 3提问于2017-12-16得票数 0
回答已采纳
我喜欢带有复选框的gijgo树形视图，因为它干净整洁，它解决了显示层次结构信息的目的。请查看下面的链接以获取文档。
由于knockout.js是前端开发的首选，因此需要为这一特定需求开发一个敲除绑定。
其思想是从后端填充层次结构数据，并将其绑定到自定义的knockout绑定。
用户选择/取消选择一些复选框，然后点击保存按钮。被选中/未被选中的数据再次被发送回服务器进行保存。
下面的代码是jquery中控件的用法。
函数tree.getCheckedNodes()返回选定复选框的数组。
如何从敲除绑定中调用上述函数。
ko.bindingHandlers.tree = {
init: fu
浏览 1提问于2019-06-11得票数 0
1回答
你可以找到。
我有一个组件，它执行以下操作：
显示图标
如果单击该图标，则在其位置显示一个搜索输入。
如果用户在显示时单击搜索输入之外的任何地方，则隐藏搜索输入并再次显示图标。
问题是，在单击图标之后，搜索输入就会显示出来，而单击搜索输入之外的任何地方都会再次显示该图标。但是，如果再次单击该图标，搜索输入将不会显示。
我尝试将一个参考文件附加到图标上，并在单击图标时评估事件是否包含，但该条件语句没有帮助。如何确保当我单击图标的任何额外时间，输入再次显示？谢谢!
import ReactDOM from "react-dom";
import "@el
浏览 2提问于2021-10-07得票数 3
回答已采纳
1回答
侧边栏菜单由自己的菜单呈现。
、、、、
边栏会自动呈现，即使我可以通过单击比萨饼图标来实现功能。
Main.js组件，在这个组件中，useState钩子切换侧边栏的功能是实现的。
import React, { useState } from 'react';
import { Navbar } from '../NavBar/Navbar';
import { SideBar } from '../SideBar/sidebar';
import { MainContainer,MainContent,MainItem,MainH1,MainP1,MainButton }
浏览 1提问于2021-09-25得票数 0
回答已采纳
我构建了简单的React代码，它只从HTML输入中获取值，当按钮单击span显示结果时。但是，发现错误并想知道为什么有人知道我如何修复它呢？............................................................................
calc.js代码
import React from 'react'
const spanResult = document.querySelector(".span-result");
const inputOne = document.querySelec
浏览 5提问于2022-07-25得票数 0
我正在尝试设置socket.io，这是我的server.js的一部分
const express = require("express");
const app = express();
const http = require("http");
const cors = require("cors");
const { Server } = require("socket.io");
app.use(cors());
const server = http.createServer(app);
const io = new
浏览 1提问于2022-10-27得票数 0
3回答
我正在React中构建一个视频播放器，并尝试跟踪视频是否正在播放。当然，我正在考虑使用React状态将布尔值设置为true或false。 问题是，每当我播放视频并试图更新状态时，我的视频似乎被重新加载到DOM中，播放/暂停状态丢失。 const refVideo = useRef();
const [isPlaying, setIsPlaying] = useState(false);
function playVideo() {
if(refVideo && refVideo.current) {
if(refVideo.current.paused) {
浏览 120提问于2020-07-04得票数 1
如果在调用setState之后添加事件侦听器，则只有再次触发该事件时，该事件侦听器才会被调用。但是，从下面的示例中，当我单击div时，会在状态更改后调用事件侦听器。
如果删除addEventListener或在toggleOpen中调用evt.stopPropagation()，则不会发生这种情况，但我想知道为什么要调用事件侦听器，如果在更改状态后设置事件侦听器。
setState是否异步更改状态，意味着回调将在事件传播后调用？
import React from 'react';
import classNames from 'classnames';
im
浏览 5提问于2017-10-11得票数 1
回答已采纳
考虑下面的例子。我们有一个简单的html文件
<body>
<button id="button" type="button" onclick="create_button()">Create button</button>
</body>
和两个版本的js文件。版本。答：
function create_button() {
var new_button = document.createElement("Button");
new_button.inner
浏览 7提问于2016-04-15得票数 1
回答已采纳
2回答
React下拉菜单仅切换一次
、、、、
我正在尝试使用useRef钩子和Typescript构建React Dropdown组件:如果我单击切换按钮一次或单击它外部，它将正确打开和关闭，但当我想再次打开它时它将关闭。有什么想法吗？这是不是我不知何故失去了引用？ 用法如下： https://codesandbox.io/s/react-typescript-obdgs import React, { useState, useRef, useEffect } from 'react'
import styled from 'styled-components'
interface Props {}
浏览 29提问于2020-04-15得票数 0
回答已采纳
我是一个较新的开发人员，并试图做出一个相当健壮的反应项目，在这个项目/网站有一个页面与一些自定义标签，其中之一是聊天。此聊天使用套接字与服务器通信。问题是，在发送了大约15-20条消息之后，任何接收聊天消息的客户端都会被长时间冻结。下面是我如何将套接字实现到我的反应性客户端中。
我有一个名为socket.js的实用程序文件：
import io from "socket.io-client";
const SOCKET_URL = "http://localhost:3001";
export const socket = io(SOCKET_URL, { tr
浏览 5提问于2021-11-30得票数 1
回答已采纳
我需要添加一些事件处理程序，这些处理程序可以与React之外的对象交互(比如Google )。在这个处理程序函数中，我想访问一些可以发送到这个外部对象的状态。
如果我将状态作为依赖项传递给这个结果，它可以工作(我可以正确地访问状态)，但是每次状态更改时都会添加添加/删除处理程序。
如果我不将状态作为依赖项传递，则添加/删除处理程序将添加适当的次数(实质上是一次)，但是状态永远不会更新(或者更准确地说，处理程序无法提取最新的状态)。
Codepen示例：
也许最好用Codepen来解释：
const App = () => {
const [n, setN] = React.useSt
浏览 4提问于2020-08-03得票数 14
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
