reactjs - 使用反应钩子设置状态,在什么情况下我必须传递一个函数来设置状态?
问题描述
这是我的代码:
function Tiker() {
var [count, setCount] = useState(0);
useEffect(() => {
var timerID = setInterval(_=>
setCount(count=>count+1)//setCount(count+1) wont work
, 1000);
return function cleanup() {
clearInterval(timerID);
};
}, []);
return <div>
this is ticker
<button onClick={() =>
setCount(count + 1)//setCount(count+1) does work
}>up </button>
{count}
</div>
}
通过反复试验,我发现如果我在 setinterval 回调中使用 setCount,我必须将回调传递给设置状态,而不仅仅是值。
如果我从 onclick 调用,情况并非如此。
这是为什么?
解决方案
问题是第二个论点useEffect
useEffect(() => {
var timerID = setInterval(_=>
setCount(count=>count+1)//setCount(count+1) wont work
, 1000);
return function cleanup() {
clearInterval(timerID);
};
}, []);
它是空数组 ( []
)。它定义了挂钩的依赖项列表。因为它是空的,这意味着钩子不依赖于任何状态或道具的值。所以count
变量在第一次调用时被消耗,useEffect
然后保持陈旧。
要纠正这个问题,您应该完全删除的第二个参数useEffect
或使数组包含[count]
。
回调正在工作,因为它接收先前的计数值作为第一个参数。
所以正确的代码看起来像
function Tiker() {
var [count, setCount] = useState(0);
useEffect(() => {
var timerID = setInterval(_=>
setCount(count + 1)
, 1000);
return function cleanup() {
clearInterval(timerID);
};
}, [count]); // Put variable that useHook depends on
return <div>
this is ticker
<button onClick={() =>
setCount(count + 1) //setCount(count+1) does work
}>up </button>
{count}
</div>
}
推荐阅读
- r - BatchGetSymbols -> GetSP500Stocks() -> 错误:表的列数不一致。你想要fill = TRUE吗?
- javascript - Javascript检查两个数组中是否存在值返回缺失值
- html - 我为什么要购买域名?我可以不注册就拥有自己的网站吗?
- .net - 为什么我的 VB.NET 代码创建的项目列表都一样
- python-3.x - 具有按用户 ID 指示的最大行数的数据集
- c++ - 为什么 Eigen 默认使用 Column-Major 而不是 Row-Major?
- python - 根据python中另一列的值提取字符串的一部分
- oracle - SQL*Plus 自定义摘要报告
- node.js - 创建用于在 React.js 中添加问题的脚本
- arrays - 如何根据 Rails Postgres 中的多个键搜索哈希数组?