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;