reactjs - 通过函数使用 useEffect 设置状态
问题描述
我知道如果在函数中使用 useEffect 会出错。但是,如果我想在函数内部或满足某些条件后更新状态变量,并同时更新 DOM 或其在 DOM 上看到的值。最好的方法是什么?
示例代码:
const handleClick = () => {
const newDiff = (Date.now() - startTime);
console.log('newDiff: ' + newDiff)
setDiff(newDiff);
console.log('diff: ' + diff)
setDiffArray(oldArray => [...oldArray, newDiff]);
console.log("diffArray: " + diffArray)
if (newDiff !== undefined) {
if (diffArray !== undefined && diffArray.length >= 5){
gameReset();
}
console.log(diffArray);
}
setStartTime(Date.now());
respawn();
console.log(diffArray);
}
为了给你一些上下文,newDiff
在单击 div 后生成,在它设置为 state using 后立即生成setDiffArray
,我尝试<div>
在所有计算完成后将其渲染为 a,但状态仍然落后于渲染,因此最后一个 div不记录并保存到阵列中。
如果我尝试使用 useEffect,我会收到无法在函数内部使用它的错误。
解决方案
推荐阅读
- regex - 在 vim 中将 'U' 附加到所有数字
- flutter - 如何在 Flutter 中与来自 http 请求的 html 响应进行交互
- julia - 有条件地在 Julia 的另一个函数中定义一个函数
- sql - 合并两列并对结果执行 where 操作
- django - 如何让非pk值成为在django rest框架中发出post请求的值
- svg - SVG 奇数(随机)颜色
- clojure - Clojure:如何判断代码是在 REPL 还是 JAR 中运行?
- sql - 如何按字母顺序对同一部门进行排序
- java - 在TSP问题中仍然找不到返回原点的方法
- javascript - 如何为 webRTC 提供 STUN 服务器