作为函数参数传递状态的React行为不同于在useEffect钩子中直接使用函数中的状态变量

Question

const test1 = useCallback(
_.debounce(async (val) => {
console.log("call test");
console.log(value);
console.log(val);
}, 200),[]);
// const test2 = useCallback(
//   _.debounce(async () => {
//     console.log("call test");
//     console.log(value);
//   }, 200),
//   []
// );
useEffect(() => {
test1(value);
// test2();
}, [value]);

value是一个状态变量，每当它发生变化时，就会调用useEffect，它会调用testX。如果value在函数中作为参数传递，一切看起来都很好，但如果value直接在函数中用作"全局"变量，console.log似乎不会记录value的当前值，即使状态已经更改，应该由useEffect((检测

当在常规速度中键入"12"时，test1中的示例console.log

call test 
from State:  "" 
from Parameter:  12 

我是不是遗漏了什么？我是React的新手，也许你可以推荐一些资源来了解这种行为


代码示例

Answer 1

const test1 = useCallback(
// ...
,[]);

空数组表示该函数应该只创建一次，然后再也不创建。由于它是在第一次渲染时创建的，因此它会关闭第一次渲染中的变量，当时value就是""。

如果您希望在value更改时创建一个新函数，则可以将useCallback的依赖数组更改为包含value:

const test1 = useCallback(
// ...
,[value]);

或者将功能的创建转移到您的使用效果中：

useEffect(() => {
const test1 = _.debounce(async (val) => {
console.log("call test");
console.log(value);
console.log(val);
})
test1(value);
}, [value]);

然而，这两种解决闭包变量的方法都会破坏去抖动行为，因此它们可能对您没有用处。既然你可以传递这个值，也许就坚持这个。