本日のミッション(会員登録ページ)

https://stackoverflow.com/questions/42609768/typescript-error-cannot-write-file-because-it-would-overwrite-input-file
Allowjs:true
Allowjs:falseに変えて解決しました.
詳細については、「リンク」を参照してください.
今日は私がメンバーの仕事を担当します.

会員登録ウィンドウで、Eメールやパスワードのフォーマットが正しくない場合は、ページに直接フィードバックしたいと思います.
これをマイクロインタラクションと呼ぶ.
マイクロインタラクションは、その名の通り、非常に細かい単位インタラクションです.
会員登録ボタンをクリックすると、「フォーマットが正しくありません」.プロンプトウィンドウを開くよりも、ボタンを押す前にユーザーに事前に通知すると、ユーザーはより便利な使用体験を得ることができます.
仕事を始めよう

これは既存のコードです.

まず、基本形状のみを表示するように変更します.

チェックシートのコードを作成します.

入力が入ると、スイッチドアで入力がどのターゲットで完了したかをチェックします.

set関数

、各ターゲットの入力値を変更する

input値がフォームのcheck関数

に合致するかどうかを確認します.
どちらも同じレベルで実行されます.

しけんほう

まずコンソールで簡単に確認します.

よかった.

maxLengthも追加されました.
最大20文字まで入力できます.

いきなりコンソールウィンドウが見えて、やっぱり何かありました.
私は開発時に空白の意味を最も重視しています.
解決しましょう.
「パスワードはフォームにありません.」
つまり、formタグで包みます.

하나를 해결하면 또 하나가 따라오는 게 개발 과정.

「自動完了プロパティ(autocomplete)を入力してください.」
Autocomplete=「new-password」は、新しいパスワードを入力し、パスワードを確認することを推奨する属性です.
その他にも多くのプロパティがあります.MDNを参照してください.

全て指定して解決しました.

validatedomNestingでエラーが発生しました.
英語を解釈するとDOMオーバーラップ構造を確認することです.
「divラベルはpラベルのサブアイテムとして指定できません.」
pタグにdivタグが加わったことによる問題かもしれません.
その間違いを確認してください.


実際,pタグにもdivタグが挿入されている.
pの代わりにdivを用いて問題を解決した.
コンソールではなく、画面に警告を表示しましょう.

まず,警告メッセージを発する素子を分離する.
さっきのコンポーネントを見たいのは「会員加入表」で、エラー処理を見たいわけではありません.

テキスト入力後に無限レンダリングが発生しました.
エラーの検出
I suspect that the problem lies in the fact that you are calling your state setter immediately inside the function component body, which forces React to re-invoke your function again, with the same props, which ends up calling the state setter again, which triggers React to call your function again.... and so on.
これは,関数素子内部でsetStateを直接呼び出すことによる問題のように見える.
反応器は同じ素子を呼び出し、同じpropsをインポートし、同じsetStateを呼び出し、関数を再呼び出し...

これにより、素子内部でsetStateを直ちに実行すると、同様のエラーが発生する.無限レンダリング現象.
3種類のインフィニティレンダリング
関連リンクを参照してください.
If you update the state directly inside your render method or a body of a functional component, it will cause an infinite loop.
クラス構成部品のレンダリングまたは関数構成部品の内部にsetStateを直接書き込むと、無限ループに陥る可能性があります.
State updates → triggers re-render → state updates → triggers re-render → …
Do you want to update a state only one time when the component mounts? Use useEffect with an empty array as a dependency.
構成部品の作成時にのみステータスを更新する場合は、userEffectを使用します.

useEffectを使用してもエラーが発生します
見てみましょう.
React Hook useEffect contains a call to 'setMessage'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [target, status] as a second argument to the useEffect Hook.
応答hook useEffectでsetMessageを呼び出す文が含まれています.依存性のない作成は、無限の更新をもたらす可能性があります.
これを防ぐには、[target,status]をuserEffectの2番目のパラメータに渡します.
useState,useEffect無限レンダリング防止
Changing state will always cause a re-render. By default, useEffect always runs after render has run. This means if you don't include a dependency array when using useEffect to fetch data, and use useState to display it, you will always trigger another render after useEffect runs.
Unless you provide useEffect a dependency array.
州間国境港.賞.レンダーをトリガーします.
useEffectはアイテムです.賞.レンダリング終了後に実行します.
これは、userEffectを使用してデータをインポートするときに依存配列もuserStateも使用しない場合、userEffectの終了後にレンダリングされることを意味します.
依存配列をuseEffectに入れない限り続行します.


徹底的に解決した.
リアクションライフサイクルチャート

素子内部でuseEffectを宣言するのは、props、stateにアクセスできるのはこれだけだからです.
userEffectは,関数型素子内部の関数と見なすことができる.jsで関数の内部に関数を書くのは、モジュールを生成することを意味します.
useEffectは、レンダリングの終了時とエレメントライフサイクルの終了時においても、エレメントスキャン内の任意のコンテンツを使用できます.
ただし、レンダリングするたびにuserEffectは新しい効果に置き換えられるそうです.

解決したものの、ミスが出るたびに、上下の様子が悪くなる.早めに彼に適当な空間を与えたほうがいい.

似合うようです.
問題を残す.レンダリングです.
上の表情パックで見たはずなのに1つ入力するたびにまばたき

エラーがなくても、レンダリングは非常に良いです.
いつメモを書きますか。
同じアイテムが変更されることが多い場合は、メモをお勧めします.

エラーメッセージコンポーネントが解決しました.

また、すべての入力が正常である場合にのみ、ボタンがクリック可能に変更されます.
今日はここまでで適当に終わりましょう