React State 钩子和组件渲染

Question

我在 react js 中创建了一个常规表单，有两个简单的字段“名称”和“电子邮件”，我目前正在使用每个 onChangeEvent 上的 state 挂钩读取他们的数据

我知道该怎么做，我有其他 forms 工作正常，我有自定义输入组件按预期工作。 我的问题是我在 object 中定义这个表单（像这样）

const form1 = <jsx></jsx>;
const form2 = <jsx></jsx>;
const ...
const [screen,setScreen] = useState(form1);

然后，在主要组件中，我返回：

return <Fragment>{screen}</Fragment>

这工作正常，完全没有问题，但是输入停止工作， onChangeEvent 仍然被触发，它接收到正确的值，但是当我调用 setState 时，它不起作用！

<input
onChange={(event)=>{
console.log(event.target.value) // THIS WORKS
setState(event.target.value)  // THIS DOES NOT
>
</input

直接渲染表单代码（没有屏幕变量），消除了这个问题。 此外，如果我执行与上述相同的操作，但从外部组件导入表单，也可以。

为什么它不能这样工作？

我一直在网上搜索，但找不到我确切问题的答案。 （希望我的问题/解释很清楚，如果不是，我可以发送原始代码）

Answer 1

它适用于我的示例：您可以尝试这种方式...

import "./App.css";
import { useState } from "react";

function App() {
  const [state, setState] = useState();
  const form1 = (
    <div>
      <input
        onChange={(event) => {
          console.log(event.target.value); // THIS WORKS
          setState(event.target.value); // THIS DOES NOT
        }}
      />
    </div>
  );
  const form2 = (
    <div>
      <input
        onChange={(event) => {
          console.log(event.target.value); // THIS WORKS
          setState(event.target.value); // THIS DOES NOT
        }}
      />
    </div>
  );
  const [screen, setScreen] = useState(form2);
  return (
    <div className="App">
      {JSON.stringify(state)}
      {screen}
    </div>
  );
}

export default App;