入力時に何度も反応するOnchangeイベントがなぜ反応するのですか？

Onchangeイベントは、React：詳細なディスカッションで複数回トリガーされます

React開発では、入力ボックスのonChangeイベントが誤って複数回トリガーされることがあります。この記事では、この問題を詳細に分析し、ソリューションを提供します。

問題の説明

useStateフックを使用して状態を管理し、入力ボックスのonChangeイベントで状態と印刷を更新するシンプルな反応コンポーネント。ただし、文字を入力すると、コンソールは2回印刷します。この現象は、オブジェクトタイプの状態を使用する場合に特に明白ですが、プリミティブタイプの状態を使用する場合は発生しません。

サンプルコードスニペット（問題コード）：

 「React」からReact、{UseState}をインポート。

デフォルトのfunction child（）をエクスポートする{
  const [state、setstate] = uesestate（{}）;

  const onchange =（event）=> {
    setState（{... state、value：event.target.value}）;
    console.log（ "Onchange Triggered"、state）;
  };

  戻る （
    <div>
      <input type="text" onchange="{onChange}">
    </div>
  ）;
}

問題分析

この問題のルートは、Reactの厳格なモードにあります。開発環境では、Strict Modeは2つのレンダリングを実行して、開発者が不必要な副作用などの潜在的な問題を発見できるようにします。

状態がオブジェクトタイプの場合、 setState値自体ではなく、オブジェクトへの参照を更新します。厳密なモードの二重レンダリングにより、 onChangeイベントが2回呼び出されます。たびに、同じオブジェクト参照が更新されます。元のタイプ状態（文字列、数字など）は値を直接更新するため、この問題は発生しません。

根本的な原因

• オブジェクトタイプ状態の参照更新：オブジェクトを状態として使用する場合、 setState新しいオブジェクトを作成しますが、 console.log onChange関数は、Reactの非同期更新メカニズムのために古い状態を印刷します。ステータスは、2回目のレンダリング中にのみ新しい値に更新されます。
• 厳密なモードのデュアルレンダリング：開発環境での厳密なモードは、この問題を悪化させ、デュアルレンダリングをトリガーします。

解決

オブジェクトタイプの状態の使用を避けたり、 setStateの呼び出し方法を最適化したりしないでください。

方法1：元のタイプ状態を使用します

文字列など、状態を元のタイプに変更します。

 「React」からReact、{UseState}をインポート。

デフォルトのfunction child（）をエクスポートする{
  const [inputValue、setInputValue] = uesestate（ ""）;

  const onchange =（event）=> {
    setInputValue（event.target.value）;
    console.log（ "OnChange Triggered"、inputValue）;
  };

  戻る （
    <div>
      <input type="text" value="{inputValue}" onchange="{onChange}">
    </div>
  ）;
}

方法2：機能的な更新を使用します

関数の更新を使用してsetState使用して、各更新が最新のステータスに基づいていることを確認してください。

 「React」からReact、{UseState}をインポート。

デフォルトのfunction child（）をエクスポートする{
  const [state、setstate] = uesestate（{}）;

  const onchange =（event）=> {
    setState（（prevstate）=>（{... prevstate、value：event.target.value}））;
    console.log（ "Onchange Triggered"、state）;
  };

  戻る （
    <div>
      <input type="text" onchange="{onChange}">
    </div>
  ）;
}

上記の方法により、反応で複数回トリガーするonChangeイベントの問題を効果的に解決できます。制作環境では厳密なモードが無効になっていることを忘れないでください。そのため、この問題は通常、開発環境でのみ発生します。

以上が入力時に何度も反応するOnchangeイベントがなぜ反応するのですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。