Question

我很难理解React函数的状态和可变性。我之前问过一个问题，但是想问一个新问题，因为我不了解潜在的问题是什么。

我有以下代码：

  const {userInfo} = useSession(); //<-- wrapper for useContext, gives some object with user info
  console.log(userInfo); //<--- correct, updates every time

  const haalDataOp = async () => {
    console.log(userInfo.enelogic); //<--- old value displaying, never updates
  }
  return <button onClick={haalDataOp} />

我有一种机制，可以监听userInfo对象（在Firestore中）的更改并相应地更新上下文。因此，当我更新userinfo对象时，会看到正确的值记录（第2行）。但是，该函数（通过单击按钮调用）具有旧的userInfo值。因此，当我单击触发haalDataOp的按钮时，它将控制台。记录旧的userInfo值。

在旧问题中，一个人建议使用useRef。这是为什么？他的示例有效，但是我不明白为什么在这里使用useRef，因为下面的代码段有效（并且不需要useRef）：

  const [value, setValue] = useState(1);

  const handleClick = () => {
    console.log(value);
    setValue(value + 1)
  }

Answer 1

  const [value, setValue] = useState(1);

  const handleClick = () => {
    console.log(value);
    setValue(value + 1)
  }

是个好方法。您可以使用useState或useRef，它们非常相似，不同之处在于useState会触发重新渲染。当您想在（react doc）周围保留实例变量时，useRef很有用

反应可变引用，更新功能状态

1 个答案: