将 state 作为 function 参数传递的反应与直接使用 state 变量中的 state 变量不同

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是一个 state 变量，每当它发生变化时，都会调用 useEffect ，它会调用testX 。 如果value在 function 中作为参数传递，一切看起来都很好，但如果value在 function 中直接用作“全局”变量，console.log 似乎没有记录 value 的当前value ，即使 Z9ED39E25EA9312EFA573E 已更改 9312EFA573E应该被 useEffect() 检测到。

以常规速度输入“12”时， test1中的示例 console.log

call test 
from State:  "" 
from Parameter:  12 

我在这里错过了什么吗？ 我是 React 的新手，也许你可以推荐一些资源来了解这种行为？


代码示例

Answer 1

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

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

如果您想在value更改时创建一个新的 function，则将 useCallback 的依赖数组更改为包含value ：

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

或者将function的创建移到你的使用效果中：

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

  test1(value);
}, [value]);

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