使用 useState 的循环函数 - React

Question

我已经阅读了hashing iteration，虽然这不是关于安全性的问题，但我似乎无法找到有关如何正确执行此操作的信息。

我认为在 React 中应该使用 useState 来完成，但我显然在这里遗漏了一些东西。

完整代码：

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

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

  function iterate(iterations) {
    for (let x = 0; x < iterations; x++) {
      setCurrentHash(sha256(currentHash)); //Does 1 hash only
      console.log("Hashed", x, "times"); //Logs 4 times
    }
  }

  return (
    <div className="App">
     
        <button onClick={() => iterate(4)}> Klick</button>
        currentHash: {currentHash}
        {/* Correct hashes */}
        <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;

Answer 1

工作代码：

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

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

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

  return (
    <div className="App">
      
        <button onClick={() => iterate("summer1", 2)}> Klick</button>
        currentHash: {currentHash}

    </div>
  );
}

export default App;

Answer 2

sha256(currentHash) 无论你运行多少次都会给你同样的结果。

currentHash won't be updated 直到组件被重新渲染并从状态中拉出一个新值并分配给函数顶部的 currentHash 的新实例。

你需要：

1. 将结果存储在变量中——而不是状态
2. 使用该变量的值作为函数的输入
3. 将最终结果保存在最后的状态中