如何让canvas onmousemove处理程序查看最新的反应状态钩子值？
要让canvas的onmousemove处理程序查看最新的反应状态钩子值，可以采用以下步骤：
- 确保反应状态钩子值已经在你的应用程序中定义并被正确更新。
- 在canvas元素上添加一个onmousemove事件监听器，将其绑定到一个自定义的处理函数上。
- 在这个自定义的处理函数中，通过调用useState或useRef钩子来获取反应状态钩子值的最新值。
- 使用获取到的最新值进行进一步处理或操作。
- 如果需要在canvas上实时显示最新的反应状态钩子值，可以在处理函数中调用canvas的绘图方法来更新显示。
例如，假设你使用React框架开发前端应用，且使用了React Hooks来管理状态。你可以按照以下方式实现：
import React, { useState } from 'react';
const CanvasComponent = () => {
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
const handleMouseMove = (event) => {
const { clientX, clientY } = event;
setMousePos({ x: clientX, y: clientY });
};
// 在画布上实时显示最新的反应状态钩子值
useEffect(() => {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillText(`Mouse position: (${mousePos.x}, ${mousePos.y})`, 10, 10);
}, [mousePos]);
return <canvas id="canvas" width={800} height={600} onMouseMove={handleMouseMove} />;
};在这个例子中，我们使用useState钩子来定义mousePos作为反应状态钩子值，并通过setMousePos方法来更新该值。handleMouseMove函数作为canvas的onmousemove事件处理程序，它会获取鼠标位置并更新mousePos的值。在useEffect钩子中，我们监听mousePos的变化，并在画布上实时显示最新的鼠标位置。
对于以上内容，推荐的腾讯云相关产品是云函数SCF（Serverless Cloud Function）和云开发（Tencent Cloud Base），适用于快速构建和部署前端应用和后端逻辑。你可以通过以下链接获取更多产品信息：
相关·内容
1回答
我试着用反应来画画。简单的onMouseMove事件不起作用。我不知道我做错了什么，但它只显示状态的第一个位置，所以矩形坐标为0，0。也许是和生活循环有关？不幸的是，关于画布有很多东西，但没有反应。
class App extends Component {
state = { x: 0,
y: 0
}
handleMouseMove(event) {
this.setState({
x: event.clientX,
y: event.clientY
});
}
componentDid
浏览 0提问于2018-06-23得票数 0
回答已采纳
我需要节流mousemove事件，我按照下面的提示来构建这个方法，但是不起作用：
下面是我的代码()：
class Tool extends Component {
constructor(props) {
super(props);
this._onMouseMove = _.throttle(this._onMouseMove.bind(this), 1000)
}
render() {
return (
<div ref="tool" className="tool">
浏览 14提问于2016-07-01得票数 14
回答已采纳
当我单击时，我将saveMouseDown状态设置为1，当我释放时，我将其设置为0。当我点击并移动鼠标时，我注销了mouseDown，即使我的鼠标按下了，它也是0吗？然而在屏幕上它显示1
import React, { useEffect, useRef, useState } from 'react';
const Home: React.FC = () => {
const [mouseDown, saveMouseDown] = useState(0);
const [canvasWidth, saveCanvasWidth] = useState(wi
浏览 0提问于2020-02-21得票数 0
3回答
当组件的道具是而不是更改时，如何防止其重新呈现？
。将光标移到Canvas上，并看到控制台记录了许多"Canvas re-rendered"消息。
在顶层，我将const函数作为处理程序传递给Canvas。onMouseMoveHandler更新App的状态，以便可以更新Details组件：
<div className="App">
<Canvas onMouseMoveHandler={onMouseMoveHandler} />
<Details passedProp={getValue} />
</div
浏览 1提问于2021-02-21得票数 0
回答已采纳
我有一个React组件，如下所示： https://codepen.io/darajava/pen/NWrdWeP?editors=0010 function TestUseState() {
const [count, setCount] = useState(0);
const buttonRef = useRef(null);
useEffect(() => {
buttonRef.current.addEventListener("click", () => {
alert(count);
});
set
浏览 10提问于2020-10-23得票数 0
回答已采纳
嘿，所以我用反应钩的形式面对这个奇怪的问题。
这是我代码的要点
const [error, setError] = useState(true)
const onSubmit = values => {
setError(false)
console.log(error) // true on first click and false on second click
}
<input type="submit" />
如您所见，当我第一次单击输入时，我得到的错误为true，第二次单击它时，错误为false。
我希望错误是错误的，当我第一次点
浏览 3提问于2020-06-08得票数 1
回答已采纳
每当用户将鼠标移动到我的<Canvas />组件上时，我想记录一下，并记录坐标。
这样做是可行的：
<div onMouseMove={this._onMouseMove.bind(this)}>
<Canvas
dataURL={this.state.image}
textTop={this.state.textTop}
textBottom={this.state.textBottom}
fontSize={this.state.fontSize} />
</div>
</div>
浏览 0提问于2018-07-07得票数 2
回答已采纳
2回答
反应钩能完全替代吗？
、、、
我正在学习反应钩，到目前为止，我已经看到这是一种作出反应‘反应’的方式，这不是在这个酷的新事物之前。
我还尝试使用钩子在不同组件之间共享状态，当组件更改状态内的任何值时，其他组件将得到更新。所以，这让我想到，Redux或任何其他状态管理解决方案能否完全被react所取代？有什么利弊吗？
在尝试将基于redux的应用程序迁移到钩子之前，我应该考虑什么？我不是一个大的第三方图书馆的球迷，如果我能用反应所能提供的工具实现同样的目标，为什么不呢？
浏览 1提问于2019-09-08得票数 2
回答已采纳
我有一个关于React功能组件、React.useCallback和循环依赖的问题。 请参阅以下示例代码 import React from 'react'
export const FooBar = (props) => {
const finish = React.useCallback((done) => {
document.removeEventListener('mousemove', onMouseMove)
document.removeEventListener('mouseup
浏览 20提问于2020-09-02得票数 1
我有一个父组件DrawingGrid和一个子组件ContextMenu。在父组件DrawingGrid中，我有一个变量existingPoints，在该变量中，当我按下该点的ContextMenu的删除按钮时，希望删除一个点。因此，我将函数handleDeleteNode()传递给我的子组件ContextMenu，在那里调用函数onClick。但是，当我按下“删除”按钮时，被访问的existingPoints变量是空的，尽管我试图在父组件existingPoints中访问它。函数中的日志解析为:删除节点：[]，因此我怀疑函数handleDeleteNode()在尝试访问existingPoin
浏览 1提问于2021-04-20得票数 0
1回答
在我的应用程序中，我使用HTML canvas创建了一个画布，我希望能够单击页面来绘制一个用颜色填充的圆圈，然后单击页面的另一部分，然后让圆圈自动用一条线连接起来。
然而，当我尝试填充我的圆圈时，它也会填满圆圈之间的空间。
下面是我尝试使用ctx.fill()时的样子
let hasCircle = false;
document.addEventListener('click', onMouseMove);
const c = document.getElementById("canvas");
const ctx = c.getContext(
浏览 9提问于2021-05-27得票数 0
回答已采纳
我有一个由chartJs驱动的画布来显示一个chart.And，我定义了一个onmousemove函数，如下所示，用于操作变量
myVariable = false;
ctx: any;
@ViewChild("mychart") mychart;
ngAfterViewInit()
{
this.canvas.onmousemove = function(e) {
this.myVariable = true;
};
}
不幸的是，它说myVairable undefined.How可以在任何时候访问这个变量吗?我也尝试了bind(这个)，但没有起
浏览 3提问于2021-02-14得票数 1
回答已采纳
我是新的反应，我正在建立一个网络商店与反应，类型记录和一个自制的API。
我在试着让手推车的部件开始工作。它从API中获取产品的ID，并基于这些API获取带有ID的产品，并将产品放入数组dinosArray中。
现在，我正在尝试为dinosArray中的每个产品在表中呈现一个新行。我的问题是，在填充dinosArray之前，就会发生行的映射和呈现--结果没有添加任何行，因为dinosArray在映射结束时是空的。
如何实现基于dinosArray中每个条目在表中呈现新行的目标？
以下是该组件的代码：
import React, { useEffect, useState } from "
浏览 3提问于2021-05-25得票数 0
回答已采纳
下面的截图摘自马西米兰·施瓦辛格的“反应-完整指南”课程(包括钩子，反应路由器，Redux)。
当使用useSelector访问状态的某些部分时，状态传入的位置并不明显。在下面的屏幕截图中，Max执行useSelector来访问ui简化器的cartIsVisible方法--但是他是如何访问状态本身的？由于useSelector只是从redux中提取的一个钩子，并且没有任何其他传入，那么他怎么能够访问状态呢？当我尝试console.log(state)时，它显示了一个未定义状态的错误。
浏览 9提问于2022-01-13得票数 2
回答已采纳
在这里的源代码中，
下面是这些说明：
// safely hook document/window events
if (document.onmousemove != f_sliderMouseMove) {
window.f_savedMouseMove = document.onmousemove;
document.onmousemove = f_sliderMouseMove;
}
我不明白它是做什么的，为什么这样做会更安全，有人明白吗？
浏览 3提问于2011-06-03得票数 2
回答已采纳
3回答
无法读取null的属性
、、、
我试图为图像浏览获得以下代码，然后剪切已浏览的图像：
这是应该使用的代码：
import "./styles.css";
import React, { useState } from "react";
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css'
export default function App() {
const [src, selectFile] = useState(null);
浏览 29提问于2022-12-03得票数 0
2回答
我在玩反应和画布。我想通过requestAnimationFrame动画一个正方形的运动。因此，我制作了一个主要组件来处理画布元素和更新square的位置：
function App() {
let canvas = useRef()
let square = useSquare(WIDTH / 2, HEIGHT, 2)
let update = () => {
square.update()
requestAnimationFrame(update)
}
useEffect(update, [])
ret
浏览 5提问于2020-06-30得票数 2
回答已采纳
铯沙堡演示演示使用“移动”和"movement.endPosition“来获取鼠标移动的Cartesian2坐标。一个例子是
我对Javascript很陌生。到目前为止，含蓄的声明和可变的提升都不是我的茶！
因此，我的问题是:基于上面提供的挑选沙堡演示，为了在鼠标上显示经度/纬度，我可以做什么来显式声明"movement.endPosition“？我对“运动”对象的出现感到不舒服，因为它是在没有明确声明的情况下出现的。
我的研究让我找到了Cesium.CameraEventAggregator对象，它包含一个名为"currentMousePosition“的方法。
第2
浏览 2提问于2019-11-21得票数 1
回答已采纳
1回答
当我将舞台光标设置为“无”时。不知何故，我无法访问形状的(Startscreen.startButton)事件侦听器。当我没有隐藏光标的时候，我可以点击它。
我做错了什么吗？
function initStartscreen() {
startscreenLayer = new createjs.Container();
createMenuCursor();
stage.addEventListener("stagemousemove", mouseMove);
stage.enableMouseOver(2);
stage.cur
浏览 0提问于2013-04-04得票数 0
1回答
查看文档，在编辑的链接底部有一条注释，这使它看起来似乎只应该在钩子依赖列表中使用道具或状态。但是，当在列表中使用道具或状态上的“复杂表达式”时，eslint插件提供了以下内容：
React在依赖项数组中有一个复杂的表达式。将其解压缩到单独的变量中，以便静态地检查它。斯林特(反应-钩/详尽-)
这让我思考了什么是允许用作依赖项的。我们可以使用从道具中计算出来的局部变量吗？在这种情况下，我们需要创建某种新的状态变量或ref吗？我不确定钩子是在组件中执行的(因此局部变量是可用的)还是从呈现的上下文中悬挂出来的(所以我们只能使用state、props或其他挂钩值，比如ref/memos)。
示
浏览 2提问于2020-04-02得票数 7
回答已采纳
我正在尝试将钩子与一些遗留的反应代码集成起来。我以前的react代码会触发来自componentDidMount的回调。我想在回调中使用钩子来更新某些状态，但这似乎不起作用:钩子被原来的值卡住了。下面是一个缩小的，可复制的例子：
const Test = () => {
const [value, setValue] = React.useState(0);
return (
<div>
<Test2 onMount={() => setValue(value + 1)} />
<Test2 on
浏览 3提问于2020-08-17得票数 1
回答已采纳
我已经将代码从组件更改为钩子。我对它完全陌生，我正在学习react，我需要帮助将它转换为钩子，我应该做些什么来使它在功能反应上工作呢？
最新情况：
我已经发布了下面的解决方案，但是当我单击输入时，它会将我带到页面的顶部。
const [nameFocused, setNameFocused] = useState(true);
<FormGroup
className={classnames("mt-5", {
focused: nameFocused,
浏览 5提问于2020-10-25得票数 5
回答已采纳
1回答
从自定义钩子到saga的数据
、、、、
我要把一些Redux商店从Redux转移到reactQuery，因为他们不需要在Redux里面。现在，我已经将一个国家数组从一个商店移到了一个用rectQuery调用API的定制钩子上。
现在，另一个传奇需要使用国家数组。但看上去我不能在一部传奇里打个钩子。我知道错误：
错误: React "useCountries“在函数"onSearchInit”中被调用，该函数既不是React函数组件，也不是自定义React函数。React组件名称必须以大写字母开头。名称必须以“使用”一词开头。反应钩/钩规则
我像这样进口我的钩子：
import { useCountries } fro
浏览 6提问于2022-07-28得票数 1
我有一个名为Plot.js的子组件。这需要一个道具testParam。父组件如下所示：
....
this.state = {
testParam: "some value",
};
...
return (
<Plot
testParam={props.testParam}
/>
);
情节是：
import { useEffect, useState } from "react";
function Plot(props) {
console.log("props.testParam is ", pr
浏览 2提问于2022-03-03得票数 1
回答已采纳
3回答
问题就说明了一切。我只是想让这个功能发挥作用。如何连续记录x和y的位置？我已经尝试为它做了一个函数，也把这个函数放在一个for循环中。
也许我只是个新手不明白我在做什么。这就是为什么我要问你们好伙计！
这是我的javascript。不要认为你需要html，因为这都在画布标签中。
const body = document.body;
let canvas = document.querySelector('#myCanvas');
let c = canvas.getContext('2d');
body.style.overflowX = 'hidd
浏览 7提问于2022-06-01得票数 0
回答已采纳
第一次使用画布的反应。我想知道在画布上下文中提供方法的最佳方法是什么(比如下面的画图)。我应该用裁判吗？州？或者还有别的办法。谢谢
到目前为止，我使用参考文献的方法如下：
class Canvas extends React.Component{
canvasRef = React.createRef();
contextRef = React.createRef();
componentDidMount() {
const canvas = this.canvasRef.current;
const context = canvas.getContext(&#
浏览 9提问于2022-02-07得票数 3
回答已采纳
1回答
我试图从一个鼠标侦听器中获取鼠标坐标，但它们是未定义的。鼠标侦听器将被添加到画布中，监听器将触发onMouseMove函数，但是传递的事件似乎没有为鼠标位置定义任何x或y坐标。
我尝试了以下变量: event.pageX、event.pageY、event.clientX、event.clientY、event.y .x、event.y.y
对于我做错了什么会导致鼠标坐标出现不确定有什么想法吗？谢谢你的帮助！
<script>
var boxes;
var canvas;
var context;
$(document).ready(function() {
canva
浏览 0提问于2013-11-14得票数 0
回答已采纳
2回答
如何及时重新油漆画布？
、、、、
问题是:我在桌面上画一些矩形，而鼠标移动(矩形大小增加)，我没有滞后，手工艺品等，所有的都是好的：
但是，当我调整矩形的大小，使其比原来的尺寸要低时，我就有了这个人造物：
红色矩形是真正的矩形，所有其他都是错误。
完美的解决方案是重新绘制画布，但当鼠标移动时，我不能一直这样做。
移动后鼠标绝对停止时有解决方案吗？
更新
守则：
unit Unit2;
interface
uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs, ExtCtrls
浏览 5提问于2014-07-24得票数 3
回答已采纳
1回答
我想让编辑页面在我的反应应用程序，但我正在挣扎如何显示价值的输入形式，并使它可编辑。我正在通过API获取食谱数据，并希望将其显示给用户，使其可编辑，并与POST请求再次发送。
如果我写：
<input
type="text"
required
value={recipe.title}
onChange={(e) => setTitle(e.target.value)}>
</input>
显示标题，但不能以任何方式更改。
如果我写
<textarea
type="text"
required valu
浏览 3提问于2022-04-20得票数 0
回答已采纳
我试图把反应和捏造结合起来，但我被困住了。
这是我的密码
import React, { useState, useEffect, useRef } from 'react';
import { fabric } from "fabric";
function App() {
const [canvas, setCanvas] = useState('');
useEffect(() => {
setCanvas(initCanvas());
}, []);
const initCanvas =
浏览 19提问于2022-06-14得票数 1
回答已采纳
3回答
如何跟踪反应钩？
、、
在开发一个新的React项目之前，我想确定是否有(或将要)好的开发工具来支持它。
我喜欢的反应之一是谷歌Chrome的React开发者工具。它允许我检查每个组件的内部状态。
的问题：工具是否显示了React的钩子状态？
如果没有，我如何检查反应组件外的内部钩子状态(也称为效应)？
浏览 0提问于2018-11-19得票数 20
回答已采纳
3回答
我正试着让一个球跟着鼠标在帆布区域里转。但是，只有当鼠标进入画布区域(在边缘)时，球才能获得第一个位置。
有什么问题，因为球不跟随鼠标时，移动在帆布内？
window.onload = startup;
var ballX = 400;
var ballY = 400;
var mouseX = 0;
var mouseY = 0;
function startup() {
document.getElementById("drawingArea").onmouseover = mouseMove;
setInterval("moveBall()"
浏览 6提问于2017-09-19得票数 5
回答已采纳
2回答
导入国和对反应组件的功能
、、、、
是否可以在功能反应组件上导入状态和函数以使其变得更干净？
下面是我的代码现在的样子：
import React from 'react'
//more imports...
const Dashboard = () => {
const [] = useState()
//more states here..
const fetch = asycn () => {
//more code..
}
//more functions here...
return (
<>
</>
)
}
浏览 9提问于2021-12-20得票数 -1
该应用程序的目标是使用web套接字将图纸从客户端画布传输到管理画布，尽可能地平稳。在每个mousemove事件中，客户端画布被压缩到png中，并通过websocket发送到服务器，最终到达管理窗口，将图像绘制到管理画布中。
实际上，代码在管理窗口中有点滞后。似乎瓶颈是ctx.drawImage()，但我不确定。
我想知道是否有一种方法可以先找到瓶颈，然后再通过揭穿或网络工作人员或其他方法来优化传输。
客户端：
<canvas id="clientCanvas" style="position: absolute; top: 0px; left: 0px;"
浏览 0提问于2016-01-14得票数 0
回答已采纳
1回答
当画布控件嵌套在表控件内时，我很难让鼠标事件正常工作。我在ASP.net网页的自定义用户控件中使用了该控件。这里基本上是文件中唯一的UI代码：
<table>
<tr>
<td>
<canvas id="canvas" width="100" height="200"></canvas>
</td>
</tr>
<table>
以及控制mousedown事件的JavaScript代
浏览 4提问于2014-05-21得票数 0
回答已采纳
3回答
我正在尝试编写一些javascript，它通过拖动鼠标来绘制一条线，然后在你松开鼠标左键时将其删除。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
window.stop = false
window.canvas = document.getElementById("e");
window.context = canvas.getContext("2d
浏览 2提问于2011-09-16得票数 1
回答已采纳
document.getElementById("cards").onmousemove = e => {
for(const card of document.getElementsByClassName("card")) {
const rect = card.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
card.style.setProperty("--mouse-x&#
浏览 8提问于2022-11-15得票数 0
回答已采纳
我不是一个反应专家，所以我有点困惑，但自从引入反应钩。什么时候使用类组件而不是功能组件？
浏览 0提问于2019-11-30得票数 1
回答已采纳
我想替换下面的事件管理，从按键代码到鼠标。我该怎么做呢？
目前支持的浏览器= FF 3.6x。
// this block of code needs to be replaced
$(document).keydown(function(e) {
//console.log(e.keyCode);
switch(e.keyCode) {
case 38: // down
draw(x,y--);
break;
case 40: // up
draw(x,y++);
break;
case 37: // left
draw(x--,y);
break;
case 39: // right
dr
浏览 2提问于2010-07-23得票数 1
2回答
在“反应”中，我尝试制作一个功能，让用户在点击时可以通过更改其图标来查看屏幕上的主动反馈。
我怎么能让它改变到另一个图标(例如，从方框到BoxChecked)，一旦我点击它？
注意:我知道这个代码行是问题所在.(呜咽)
<img src={click} alt="icon" onClick={handleClick} />
App.jsx
import React, { useState } from 'react'
import './App.css'
import { GrCheckbox as Box } from '
浏览 8提问于2022-06-07得票数 1
回答已采纳
根据Redux样式指南，强烈推荐到。
例如，与其仅仅连接<UserList>组件并读取整个用户数组，不如让<UserList>检索所有用户ID的列表，将列表项呈现为<UserListItem userId={userId}>，并让<UserListItem>连接起来并从存储中提取自己的用户条目。
不过，这听起来有点矛盾，在的“使用与反应”部分中，表示组件是从道具中读取数据，而不是从商店中读取数据。
这是否意味着：
最好的做法是尽量减少表示组件的数量，从而增加有状态组件的数量？
或者连接的组件实际上也可以是无状态组件？
浏览 6提问于2020-03-29得票数 0
回答已采纳
1回答
马上为我的英语道歉。
在每一行对面的表中应该有一个“编辑”按钮，当你点击它时，行中的所有单元格都变成可编辑的，而不是“编辑”按钮，“保存”按钮出现了。我花了很多时间却搞不清楚。
我需要释放没有反应表，反应网格等。
我的桌子：
<table>
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Ac
浏览 5提问于2020-01-03得票数 0
回答已采纳
2回答
我的程序可以识别mousemove event。我想做的是让我的程序在移动设备上工作。
这就是为什么我想把mousemove事件转换成一个touchmove event。
到目前为止我的代码是这样的：
var d=ctx.getImageData(0,0,canvas.width,canvas.height).data;
$hit=$("#hit");
$("#canvas").mousemove(function(e){handleMouseMove(e);});
tolerance = 20;
function handleMouseMove(e){
浏览 3提问于2014-06-05得票数 3
警告这不是的副本。here三渲染器被废弃了，我在这里使用功能组件。
我需要加载一个.obj文件，但是出现了两个问题。首先，它抛出TypeError: instance is undefined的反应-三纤维.其次，它以HTML：Error: THREE.OBJLoader: Unexpected line: "<!DOCTYPE html>"的形式加载Error: THREE.OBJLoader: Unexpected line: "<!DOCTYPE html>"。
这些问题是与包裹有关，还是与三纤维反应有关？
下面是不起作用的代码：
浏览 1提问于2019-06-12得票数 2
react.js中的年份选择器下拉列表，它可以将年份返回为整数。反应年选择器有一些bug需要修复。如果你认识一个，请提出建议。是否有可能通过使用数据交换包？如果是的话谁能告诉我怎么。谢谢。
浏览 2提问于2019-09-27得票数 3
回答已采纳
1回答
画布径向渐变动画
、、
我需要你帮我写剧本。我试图让“亮点”随着我的canvas上的鼠标移动，但它看起来移动得比课程快得多。问题出在哪里？
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
position:absolute;
margin: 0px;
padding: 0px;
}
canvas{
position: fixed;
height:900px;
Width:900px;
}
</s
浏览 16提问于2017-06-21得票数 0
回答已采纳
我正在尝试创建一个小库来清理这个模式。
const [a, setA] = useState(1)
const [b, setB] = useState(2)
const [c, setC] = useState(3)
const [d, setD] = useState(4)
const [e, setE] = useState(5)
// ...
变成这样的东西。
s({
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
}, true)
我的想法是遍历提供给s()函数的对象，并将每个键/值添加到状态保持对象，如下所示：
st = {
a: 1,
set
浏览 4提问于2019-04-07得票数 1
回答已采纳
我很好奇为什么在for循环中设置状态不像预期的那样工作。
这是我使用钩子的代码。
const [count, setCount] = useState(0);
const onButtonPress = () => {
for(let i=0; i<100; i++){
setCount(i);
}
}
useEffect(()=> {
console.log('useEffect called');
console.log(count);
},[count])
我按一下按钮调用onButtonP
浏览 4提问于2020-05-20得票数 4
回答已采纳
[这是包含所有代码的，它说明了我遇到的问题。对不起，所以不允许使用TSX进行适当的反应代码，等等]
我有一些选项卡，当然，每当我单击每个选项卡时，我的状态都会发生变化(即selectedTab)和正在呈现的主体。每个选项卡项目都有一个与其相对应的主体，在我的例子中，第一个选项卡有一个组件，如果单击它，计数就会增加。嗯，每当选项卡发生变化，计数就会被重置。实际上，这是一个全面的改进机。
做一个完整的重呈现的问题在于，考虑到用户将如何使用它，它不仅效率低下，而且它还会给火增加燃料:如果用户在选项卡上输入了什么东西，然后切换到另一个选项卡去做其他的事情，然后返回到原来的选项卡，该怎么办？他刚输掉了他
浏览 4提问于2022-02-17得票数 0
1回答
我正在创建一个自定义钩子来捕获浏览器窗口大小，让我知道它是否是移动的。目前，我的问题是反应，告诉我它不能将screenSize的变量值保留在useEffect挂钩中。我怎么才能避开这一切？
export default function useIsMobile() {
let screenSize = 0;
useEffect(() => {
window.addEventListener("resize", () => {
screenSize = window.innerWidth;
});
浏览 2提问于2021-03-11得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
