javascript - 函数触发时如何更新我的 DOM？

Question

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

诚然，我是 js/React 的菜鸟。每次我的 redux-form 字段更新时，我都设法触发了我的功能。但我无法将输出输出到 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;

我假设，我需要“注入(inject)”输出。

Answer 1

var 输出应该是 ReactJS 中的一个状态来更新:)

在钩子(Hook)中:

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]);

这应该有效:)