Javascript 当函数启动时，如何更新DOM？

我做错了什么事。但我不太明白那是什么

诚然，我是js/React的新手。每次我的redux表单字段更新时，我都设法启动了我的函数。但是我不能把输出放到dom上。有人能看出我做错了什么吗

我的代码：

const Register = () => {
  
  var output =  "this should disappear when changed fires"
  
  const onSubmit = (formValues) => {
    console.log("formValues", formValues); //<-- fires fine.
  };

  const changed = (formValues) => {
    if (formValues?.firstName) {
        output = simpleStringify(formValues);
        console.log(output) // <-- the output is changed
        
    }
  };

  return (
    <div>
      Register Page
      <RegistrationForm onSubmit={onSubmit} onChange={changed} user={user} />
     <Highlight>{output}</Highlight> {/*  not updating */}
    </div>
  );
};

export default Register;

const寄存器=（）=>{
var output=“当发生更改时，此选项应消失”
const onSubmit=（formValues）=>{
console.log（“formValues”，formValues）；//{
如果（formValues？.firstName）{
输出=simpleStringify（formValues）；
console.log（output）//var output应该是ReactJS中要更新的状态：）

在挂钩中：

const [output, setOutput] = useState("this should disappear when changed fires"); 

const changed = (formValues) => {
    if (formValues?.firstName) {
        setOutput(simpleStringify(formValues));
        
        
    }
};

useEffect(() => {
   console.log(output) // <-- the output is changed
}, [output]);

const[output，setOutput]=useState（“这应该在发生更改时消失”）；
const changed=（formValues）=>{
如果（formValues？.firstName）{
设置输出（simpleStringify（formValues））；
}
};
useffect（（）=>{
console.log（output）//组件的其余部分在哪里？当内部状态更新时，React会更新DOM。
output
是状态变量吗？这不是因为您在代码片段顶部将其定义为普通变量，而不是状态变量。您需要使用
useState
hook。哈哈：）6个月前，我还习惯于在课堂上工作，并开始使用钩子！