中に入る。

7日、2週目の月曜日から、Devlogは延期された.理由は手首の痛み.どのくらい仕事をしていたのか、腕が痛くて文章も書けなくなった.この日以降、手首を保護するために、左手マウスに向かいました.積み上げたdevelogを書くには迷っていますが、幸いgithubには簡単なdevelogがあるので、それをもとに書きたいと思います.

入力待ち1秒、要求サーバ

隊員たちの協力と進行状況を見て、夜からこの部分を重点的に行いました.特にこの機能に時間がかかりました.これは様々な概念が総合的に運用されている部分である.
この機能により、不要なサーバの重複要求を削減できます.

コンセプトuserEffect環境での非同期関数

結論から言えば,useEffect関数に直接asyncを加えることはできない.
例えば、useEffect(async () => {のようなコードはだめです.
そうですか.非同期関数を個別に作成および実行する必要があります.

useEffect(() => {
async function testFunc() {
  const A = await axios();
  console.log(A);
}
  testFunc();
}, [])

async await関数はpromisオブジェクトを返すため、負の効果関数ではありません.

負効果関数は関数のみを返し、負効果関数が呼び出される前と素子が消える前に呼び出されます.

userEffecthookでasync await関数を使用する方法の1つは、割り当て関数内にasync await関数を作成し、

を呼び出すことです.
[Hooks]userEffect非同期の使用
[react]useEffect hookでasync wait関数を使用する useEffectとuseStateの概念に対して一定の理解があって、非動機を加えて、とても大きい理解があります.現在ではasync/awaitを扱う方法が把握されているが,当時はなかなか見つからなかった.勤務時間が長くなるにつれて、疲労感が蓄積されてきたのでしょうか.非同期コードを少し見られたらどうなりますか?

コンセプトsetTimeout, clearTimeout

settimeout最初のパラメータは、サーバ上に重複する確認要求関数を配置し、2番目のパラメータは時間を配置します.テキストボックスでonChange操作が発生した場合、settimeout時間(1秒)をcleartimeoutにリセットし、settimeoutを再度実行します.
ここで問題が発生したが、onChangeのHook更新を受け入れるにつれて、新しいsettimeoutも発生した.cleartimeoutを実行しても、新しいレンダリング環境で実行されるため、新しいsettimeoutが初期化されます.settimeoutはブランド化されても残ると思っていたので、グーグルを再回転しました.

コンセプトuseRef()

userefは、再有効にしてもステータスを維持できます.timeWait変数にuseref()hookが割り当てられ、cleartimeoutおよびsettimeoutが設定されます.結果は大成功!再アップロードしてもuserefのため、以前のsettimeoutは正常に初期化されます.

 // TODO: 입력시 대기 후 서버에 데이터 충돌 확인
  const timeWait = useRef();
    useEffect(() => {
    clearTimeout(timeWait.current);
    timeWait.current = setTimeout(() => {
      // * useEffect 안에서 비동기 실행할 때 함수
      async function setConflictationMsgFromAsync() {
        setConflicationMsg(await isConflict(values));
      }
      setConflictationMsgFromAsync();
      setValidationMsg(isValid(values));
    }, 1000);
  }, [values]);