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

Question

This seems to be a problem unique to react as I am unable to replicate it using plain JavaScript. The issue is that I use a state variable within a function, but the function will use the value that the variable had whenever the function was defined, rather than the current value of the variable:

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>
  )
}

After clicking the div, the output will be:

Value is 0
Value is 2
0

Clearly, the variable val is updated to be 2, but when the function f is run it prints out the value that val had when the function was defined rather than its new updated value.

I've worked around this by having the function be redefined any time the state values it depends on change, but this is less than ideal, as I would expect the function to always use the new value. It seems in regular javascript this does not occur, or at least I cannot figure out how to make it happen.

Why is this happening? is there a fix that can be made that does not require me to redefine the function? Is this unique to react?

Answer 1

As @Tuhin pointed out, the short answer is closures. When you define setF(()=>function(){console.log(val)}) , val = 0 and at no point after that is the function definition changed, so f has closure over the value of val at the point of its creation. You can add console.dir(f) in your code to check it out:

Answer 2

In your code, f didn't update when val updated. If you give to your useEffect the val as a dependency the problem will be solved. You can see it .

Answer 3

As I understood, you want to print recent val by the f function.

But The problem is, setF(()=>function(){console.log(val)}) <-- this line.

val will be always 0 as it is assigned once, and will be called by value, not by the reference. Just like how setTimeout works.

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