为什么我的 React 组件中的值没有更新？

Question

这似乎是一个独特的反应问题，因为我无法使用纯 JavaScript 复制它。 问题是我在函数中使用状态变量，但函数将使用该变量在定义函数时的值，而不是变量的当前值：

import React, { useEffect, useState } from 'react';
export default function Home() {
  const [val, setVal] = useState(0);
  const [f, setF] = useState(null);

  useEffect(function(){
    setF(()=>function(){console.log(val)})
    setVal(2)
  },[])

  console.log("Value is", val)
  return (
    <div 
      onClick={f} 
      style={{
        backgroundColor: 'red',
        height: 100,
        width: 100,
      }}
    >

    </div>
  )
}

单击 div 后，输出将是：

Value is 0
Value is 2
0

显然，变量 val 被更新为 2，但是当函数 f 运行时，它打印出 val 在定义函数时的值，而不是它的新更新值。

我已经通过在它所依赖的状态值发生变化时重新定义函数来解决这个问题，但这不太理想，因为我希望函数始终使用新值。 似乎在常规 javascript 中不会发生这种情况，或者至少我不知道如何使它发生。

为什么会这样？ 有没有不需要我重新定义函数的修复方法？ 这是唯一的反应吗？

Answer 1

正如@Tuhin 指出的，简短的回答是闭包。 当您定义setF(()=>function(){console.log(val)}) ， val = 0 并且在此之后的任何时候都不会更改函数定义，因此f在点处对 val 的值具有闭包它的创造。 您可以在代码中添加console.dir(f)来查看：

Answer 2

在您的代码中，当val更新时f没有更新。 如果您将val作为依赖项提供给useEffect ，则问题将得到解决。 你可以看到它。

Answer 3

据我了解，您想通过f函数打印最近的val 。

但问题是， setF(()=>function(){console.log(val)}) <-- 这一行。

val 将始终为 0，因为它被分配一次，并且将通过值调用，而不是通过引用调用。 就像 setTimeout 的工作原理一样。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop