为什么 useState 会导致这个简单的代码行为不正确？

Question

我已经编写了一个简单的组件来重现我在一个更大的项目组件中遇到的问题。

假设我有一个 arrayA，我想在每次单击按钮时连续添加值 1，我想在按钮单击时更新状态 arrayB。

export default function UseStateTest(props) {
  const arrayA = [];
  const [arrayB, setArrayB] = useState([1, 2]);

  function handleClick() {
    arrayA.push(1);
    setArrayB([3, 4]);
    console.log(arrayA);
  }

  return <button onClick={handleClick}>Test</button>;
}

那里有 setArrayB，代码行为不正确，当我单击按钮时：arrayA 将始终有 1 个元素 1（我认为，根据我遇到类似问题的其他代码的经验，代码实际上是替换元素而不是推送）。

当我注释掉 setArrayB 时，代码运行正常，每次单击按钮时都会将新元素“1”添加到数组中。

请有人帮助我了解导致此行为的原因。

Answer 1

你的组件函数被调用每次你的组件需要re-rendered。每次调用组件时都会得到不同的 arrayA（与任何其他函数一样）。这就是为什么有 useState 钩子（以及其他一些钩子，例如 useRef）的原因：因此您可以跨渲染持久保存状态信息。

如果不调用 setArrayB，您的组件不会更改其状态，因此 React 不会 re-render 它（不会再次调用您的函数）。通过调用 setArrayB，您正在更改组件的状态，导致 re-render，它执行新的调用，创建新的 arrayA（和一个新的 handleClick）。

您不能在函数内简单地 variables/constants 中存储任何应该在渲染之间保留的信息，因为这些信息是在每次函数调用时重新创建的。相反，使用 useState（对于状态信息，当更改时，应该导致您的组件 re-render），useRef（对于不应导致您的组件的状态信息 re-render [罕见])，以及其他各种钩子。

为什么 useState 会导致这个简单的代码行为不正确？

Why does useState cause this simple code to behave incorrectly?

jsx

typescript

reactjs

next.js

react-hooks