在使用钩子的 React 组件的项目中,我试图了解如何正确避免调用绑定到旧状态值的回调。下面的示例说明了这个问题(但不是我正在处理的代码)。
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const Message = () => {
const [message, setMessage] = useState("");
function doStuff() {
console.log(message);
}
useEffect(() => {
setInterval(doStuff, 1000)
}, []);
return (
<div>
<input
type="text"
value={message}
placeholder="Enter a message"
onChange={e => setMessage(e.target.value)}
/>
<p>
<strong>{message}</strong>
</p>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<Message />, rootElement);
这里的问题当然是setInterval
将保留doStuff
函数与第一次(也是唯一一次)调用该效果时的函数相同。而当时的message
state 为空,因此,间隔函数每秒将打印一个空字符串,而不是实际位于文本框内的消息。
在我的真实代码中,我遇到了应该触发组件内部函数调用的外部事件,并且它们遇到了同样的问题。
我应该怎么办?
你应该useCallback
并将其作为依赖项传递给您的效果。
const doStuff = useCallback(() => {
console.log(message);
}, [message]);
useEffect(() => {
const interval = setInterval(doStuff, 1000);
return () => clearInterval(interval); // clean up
}, [doStuff]);
这里当message
更新后它将有新的价值doStuff
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)