[react]ユーザ状態と非同期

3096 ワード
React useState 非同期 テキストリンク
ケース

受信json objectはpropsとして変更されましたが、再レンダリングできません.
usestate,,言うことを聞かない.
まず、親構成部品が{frontend:}と同じ情報を送信した場合.
現在の構成部品は、情報を受信して画面に表示します.
現在の構成部品で+ボタンを押して数量を増やそうとします.

コンソールには+ボタンが押されていますが、構成部品は変更されません.

// props.positions == {"frontend":1}
function plusCount(name){ 
  let newPos = props.positions;
  newPos.map(pos => {
    if (pos.name === name) {
      pos.count++;
    }
  });
  console.log("+");
  // 값은 변경 되었다!
  props.setPositions(newPos);
  // 상위 컴포넌트로 변경된 값을 보냈는데 변경 되지 않는다.
}
エラーコード
에러 코드라도 나면 좋을텐데 콘솔 창이 깨끗해서 눈물이 났다.
解決策
  • 検索キーワードuseState 객체 깊은 복사
    • 問題は、オブジェクトを変更する前に浅いコピーを行ったことです.let newPos = props.positions; // 얕은 복사JavaScriptからオブジェクトをコピーする場合は、深度コピーが必要です.
    オブジェクトが参照変数であるためです.JSON.parse(JSON.stringify(객체))を用いて深さ放射を行った.
    そのまま変更しました.let newPos = JSON.parse(JSON.stringify(props.positions))本当に基本の中で最も基本的な~~~何時間ももがいた

    動きが素晴らしかったです…^^
    オブジェクトを深くコピーする必要があります.
    オブジェクトが変化しているかどうかを検出することで、オブジェクトを再レンダリングします.
    [コードKata]-ネストIf状態(ネストIf文)
    [JS]オブジェクト