gpt4 book ai didi

javascript - 如何防止内联函数绑定(bind)到旧状态值

转载 作者:行者123 更新时间:2023-12-01 15:35:33 26 4
gpt4 key购买 nike

在使用钩子(Hook)的 React 组件的项目中,我试图了解如何正确避免调用绑定(bind)到旧状态值的回调。下面的示例说明了这个问题(但不是我正在处理的代码)。

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 为空,因此,interval 函数将每秒打印一个空字符串,而不是实际在文本框中的消息。
在我的真实代码中,我有外部事件应该触发组件内部的函数调用,它们也遇到了同样的问题。
我应该怎么办?

最佳答案

你应该 useCallback并将其作为依赖项传递给您的效果。

const doStuff = useCallback(() => {
console.log(message);
}, [message]);

useEffect(() => {
const interval = setInterval(doStuff, 1000);
return () => clearInterval(interval); // clean up
}, [doStuff]);

这里当 message得到更新它将在 doStuff 中具有新值

关于javascript - 如何防止内联函数绑定(bind)到旧状态值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62589158/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com