Javascript 添加到usestate不工作的状态？

我试图用react的使用状态来维护使用输入的跟踪

出于某种原因，这是相当困难的

我现在使用的函数是

  function handleClick(e) {

    setAnswers([...answers,  answer ]);
    // setTheArray([, newElement]);

setAnswer()
    setTime(true);
    setStage(Stage + 1);
    e.preventDefault();
    console.log("The link was clicked.");
    console.log(answers);
  }

输入部分如下所示

<div className=" items-center ">
            <label for="answer" className="sr-only font-thin px-2 pb-4 text-lg">
              Answer
            </label>
            <input
              onChange={(e) => setAnswer(e.target.value)}
              type="text"
              value={answer}
              name="answer"
              id="answer"
              className=" items-center shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
              placeholder="Enter Here"
            />
          </div>

答复
setAnswer（e.target.value）}
type=“text”
值={answer}
name=“答案”
id=“答案”
className=“项目中心阴影sm焦点：ring-indigo-500焦点：border-indigo-500块w-full sm:text sm border-gray-300圆形md”
占位符=“在此处输入”
/>

还有按钮

 <button
        onClick={handleClick}
        className="bg-blue-500 hover:bg-blue-700shadow-xl font-semibold rounded-full fixed right-8 bottom-20 text-xl px-8 py-3 sm:right-16 sm:bottom-16 text-white sm:text-xl sm:py-3 sm:px-7  flex items-center focus:outline-none"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="-ml-1 mr-2 h-5 w-5"
        >
          <circle cx="12" cy="12" r="10"></circle>
          <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon>
        </svg>
        <span>Submit </span>
      </button>

提交

本质上，我希望随着时间的推移跟踪用户输入——我可以创建一个基于类的组件，但如果可能的话，我宁愿只使用函数

这是整个组件，

从“react”导入{useffect，useState}；
从“react hook form”导入{useForm}；
从“util/auth.js”导入{requireAuth}；
从“组件/仪表板/侧边栏/侧边栏用户”导入侧边栏用户；
从“组件/仪表板/MindVault/MindVault节”导入MindVault节；
从“../../components/dashboard/BottomNavigation/BottomNavigation”导入底部导航；
/*
这一页测量某人的工作记忆，
是多少位数
能够在设定的时间段内记忆。
为此，需要：
-随机数字，
-计时器，
-根据任务的进度输入用户答案，
-药物记录，或缺乏药物记录
理想情况下，如果可能的话，在每一点进行6次测试以发送数据，可能只是在最后进行一次总查询。
用户流
-初始成分
-用于记忆文本的组件
-用于输入的组件
-其余部分
*/
函数makeid（长度）{
var结果=”；
变量字符=
“ABCDEFGHIJKLMNOPQRSTUVWXYZABCDFGHIJKLMNOPQRSTUVXYZ0123456789”；
var charactersLength=characters.length；
对于（变量i=0；i{
//这将设置等待时间，即3秒
如果（时间）{
常量超时=设置超时（（）=>{
//如果执行任何操作，此块将在超时“过期”后运行
//甚至可以设定状态
设定时间（“输入”）；
log（“调用了超时”）；
}，3000）；//超时将在6000毫秒后过期
//请确保在卸载组件时清除超时，以避免内存丢失问题
return（）=>clearTimeout（超时）；
//此回调函数仅在卸载组件时运行，不重新呈现
}
}，[时间]；
功能更改（e）{
设置应答（如目标值）；
}
函数handleClick（e）{
设置答案（[…答案，答案]）；
//setTheArray（[，newElement]）；
setAnswer（）
设置时间（真）；
设置阶段（阶段+1）；
e、 预防默认值（）；
log（“链接被点击了”）；
控制台日志（应答）；
}
让我们输入；
if（time==true）{
测试输入=(
阶段{Stage}
把数字记在脑子里！
{数字}
);
}否则如果（时间=“输入”）{
测试输入=(
阶段{Stage}
输入数字
答复
);
}else if（time==false）{
测试输入=(

你要做一个小的短期记忆测试，几个字母就可以了
在电脑显示器上闪烁3秒钟。你的工作是写
记下尽可能多的字母

);
}
返回(
工作记忆测验
{testInput}
);
}
导出默认基线；

---

干杯

以下是您如何记录所有答案的方法。因为你没有所有的代码来处理阶段，我不能让这个答案更具体 但是，如果这还不够，请让我知道在哪里详细说明

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [answers, setAnswers] = useState([]);
  const [answer, setAnswer] = useState("");

  const [isSubmit, setIsSubmit] = useState(false);

  useEffect(() => {
    if (answers.length === 6) {
      //here you would fire your submit to server
      setIsSubmit(true);
    }
  }, [answers]);

  function handleClick(e) {
    if (!isSubmit) setAnswers([...answers, answer]);
  }

  function handleOnChange(e) {
    setAnswer(e.target.value);
  }

  return (
    <div className="App">
      <input value={answer} onChange={handleOnChange} />
      <button onClick={(e) => handleClick(e)}>Submit</button>
      <ul>
        {answers.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      {isSubmit ? "Has Submitted" : "Has not Submitted"}
    </div>
  );
}

import React，{useffect，useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[answers，setAnswers]=useState（[]）；
const[answer，setAnswer]=useState（“”）；
const[isSubmit，setIsSubmit]=useState（false）；
useffect（（）=>{
if（answers.length==6）{
//在这里，您将启动提交到服务器
setIsSubmit（true）；
}
}[答]；
函数handleClick（e）{
如果（！isSubmit）设置答案（[…答案，答案]）；
}
功能更改（e）{
设置应答（如目标值）；
}
返回(
handleClick（e）}>提交

{answers.map（（项目）=>(
{item}
))}

{isSubmit？“已提交”：“未提交”}
);
}
import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [answers, setAnswers] = useState([]);
  const [answer, setAnswer] = useState("");

  const [isSubmit, setIsSubmit] = useState(false);

  useEffect(() => {
    if (answers.length === 6) {
      //here you would fire your submit to server
      setIsSubmit(true);
    }
  }, [answers]);

  function handleClick(e) {
    if (!isSubmit) setAnswers([...answers, answer]);
  }

  function handleOnChange(e) {
    setAnswer(e.target.value);
  }

  return (
    <div className="App">
      <input value={answer} onChange={handleOnChange} />
      <button onClick={(e) => handleClick(e)}>Submit</button>
      <ul>
        {answers.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      {isSubmit ? "Has Submitted" : "Has not Submitted"}
    </div>
  );
}