React使用useState实现迭代哈希仅生效一次的问题求助

React 的状态更新默认是批量处理的，且你代码中直接读取currentHash调用setCurrentHash的写法，依赖的是当前iterate函数执行时的闭包值，整个循环过程中currentHash的值始终是初始的summer1，相当于四次都在给状态设置同一个哈希结果，所以看起来仅执行了一次哈希运算。而循环本身是正常执行的，所以控制台会打印4次日志。

有两种可行的修改方式：

方案1：使用函数式状态更新 #

useState 的 setter 支持传入函数，参数是上一次更新后的最新状态值，修改循环内的赋值逻辑即可：

setCurrentHash(prevHash => sha256(prevHash))

这种方式会基于上一次的哈希结果迭代计算，最终得到正确的迭代哈希值。

方案2（更推荐）：本地计算完成后一次性更新状态 #

先在临时变量中完成所有哈希迭代，再将最终结果赋值给状态，仅触发一次组件重渲染，性能更优。
修改后的完整iterate函数如下：

function iterate(iterations) {
  let tempHash = currentHash;
  for (let x = 0; x < iterations; x++) {
    tempHash = sha256(tempHash);
    console.log("Hashed", x, "times");
  }
  setCurrentHash(tempHash);
}

import { sha256 } from "js-sha256";
import { useState } from "react";

function App() {
  const [currentHash, setCurrentHash] = useState("summer1");

  function iterate(iterations) {
    let tempHash = currentHash;
    for (let x = 0; x < iterations; x++) {
      tempHash = sha256(tempHash);
      console.log("Hashed", x, "times");
    }
    setCurrentHash(tempHash);
  }

  return (
    <div className="App">
        <button onClick={() => iterate(4)}> 点击</button>
        currentHash: {currentHash}
        {/* 正确哈希对照 */}
        <p>0: summer1</p>
        <p>1: {sha256("summer1")}</p>
        <p>2: {sha256(sha256("summer1"))}</p>
        <p>3: {sha256(sha256(sha256("summer1")))}</p>
        <p>4: {sha256(sha256(sha256(sha256("summer1"))))}</p>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者RustyJames