如何防止随机数再次产生？

Question

我正在为 24 game 构建某种计算器。一切都很好，直到我添加 onClick 到按钮以存储状态。

完整代码如下：

import React from "react";
import { useState } from "react";

export default function DuaEmpat() {
  const [calc, setCalc] = useState("");
  const [result, setResult] = useState("");

  const ops = ["/", "*", "+", "-"];

  const ns = () => Math.floor(Math.random() * (9 - 1 + 1)) + 1;

  const updateCalc = (value) => {
    setCalc(calc + value);
  };

  const createDigits = () => {
    const digitz = [];

    for (let i = 1; i < 5; i++) {
      digitz.push(
        <button
          onClick={() => updateCalc(ns().toString())}
          className=""
          key={i}
        >
          {ns()}
        </button>
      );
      console.log(digitz);
    }
    return digitz;
  };

  return (
    <>
      <main>
        <div className="App ">
          <div className="Calculator-24 ">
            <div className="display">
              {result ? <span className="text-gray-400">(0)</span> : ""}{" "}
              {calc || "0"}
            </div>
            <div className="operators r">
              <button className="flex-1" onClick={() => updateCalc("/")}>
                /
              </button>
              <button className="flex-1" onClick={() => updateCalc("*")}>
                *
              </button>
              <button className="flex-1" onClick={() => updateCalc("+")}>
                +
              </button>
              <button className="flex-1" onClick={() => updateCalc("-")}>
                -
              </button>
              <button className="flex-1">DEL</button>
            </div>
            <div className="digits flex flex-wrap appearance-none border-none outline-none bg-zen-tertiary font-bold text-white text-2xl  p-4 cursor-pointer">
              {eval(createDigits())}
              <button
                onClick={() => window.location.reload()}
                className=" p-4 ">
                acak ulang
              </button>
              <button className=" p-4 ">=</button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
}

知道如何阻止生成的数字 (ns()) 的值不变吗？

Answer 1

我想这就是你想要做的？如果我误解了你的问题，请告诉我。

在您的代码中有一个 ns() 函数。每次运行时，它都会创建一个新的随机数。因此，让我们分解一下您编写的代码。

     <button
          onClick={() => updateCalc(ns().toString())} //When clicked this will run the ns function and create a new number. Then it will pass that value to the updateCalc funtion. 
          className=""
          key={i}
          >
          {ns()} //this is calling the ns function AGAIN to create a new value. Therefore your onClick value and your button text will always mismatch.
      </button>

那么我们如何修复您的代码？让函数只调用一次！

 for (let i = 1; i < 5; i++) {
      let randomNumber = ns().toString(); //Calls the function ONCE for every for loop and saves the return to a variable.
      digitz.push(
        <button
          onClick={() => updateCalc(randomNumber)} // Lets use that variable from earlier
          className=""
          key={i}
        >
          {randomNumber} // lets use that same variable again.. Remember the function was only ran once during this loop. so the variable will be EXACTLY the same until the next loop.
        </button>
      );
      console.log(digitz);
    }

如何防止随机数再次产生？

How to prevent random numbers from generating again?

javascript

math

numbers

reactjs