有没有办法让常量在 React 的函数中只运行一次？

Question

我的问题：

目前，我正在尝试使用 React 和 AntDesign 为我的网络应用程序开发一个 exam/quiz 模式。我的问题是：当我点击“测试”按钮提交测验时。重新加载整个函数，包括常量和问题。这会生成全新的问题和答案，导致我无法检查提交的答案是否正确。

这是应该只运行一次的部分：

        // Generates ten random questions from inputted JSON file
        const array = []
        for (let i = 1; i <= question.length; i++) {
        array.push(i)
        }
        const result = [];

        for (let j = 1; j <= 10; j++) {
        const random = Math.floor(Math.random() * (question.length - j));
        result.push(array[random]);
        array[random] = array[question.length - j];
        }

        // Random shuffles the answers of the questions
        const answerarray = []
        for (let k = 1; k <= 4; k++) {
            answerarray.push(k)
        }
        const answerresult = [];

        for (let l = 1; l <= 4; l++) {
            const arandom = Math.floor(Math.random() * (4 - l));
            answerresult.push(answerarray[arandom]);
            answerarray[arandom] = answerarray[4 - l];
        }

我试过的：

我已经尝试使用 Hooks useMemo() 和 useEffect() 但无济于事。这会导致“无法读取未定义的属性”错误。
我还尝试隔离 DisplayQuestions.js 文件的某些部分（请参阅 link 到 CodeSandbox）。由于 AntD 使用的 <Form> 组件，这导致“测试”按钮不起作用。（它必须在一个文件中。）

Link 到 CodeSanbox: https://codesandbox.io/s/problem-wym5m?file=/src/App.js

我希望有人能帮助我解决我的问题。提前致谢！

Answer 1

在具有空依赖数组的 useEffect 中仅调用一次您想要运行的函数（在您的情况下是生成随机数的函数），并将结果存储在状态变量中。

样本：

import { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(5);
  const [count2, setCount2] = useState(7);
  useEffect(() => {
    setCount(Math.random()*10)
    console.log('jjj')
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>count: {count} and count2: {count2}</h2>
      <button onClick={()=>setCount2(count2+1)}>Count2+</button>
    </div>
  );
}

这里计数只会改变一次。

有没有办法让常量在 React 的函数中只运行一次？

Is there a way to let constants only run once in a function in React?

reactjs

antd

有没有办法让常量在 React 的函数中只 运行 一次？

Is there a way to let constants only run once in a function in React?

reactjs

antd

有没有办法让常量在 React 的函数中只运行一次？