反応配列の変更が更新されない場合の対処方法

js での配列の割り当てが参照によって渡されるため、React の配列の変更は更新されません。解決策は次のとおりです: 1. 対応する反応ファイルを開きます; 2. スプレッド演算子を使用して新しい配列を作成し、メモリを変更します。 Quote; 3. 「panes.push({key: panes.length,tab: `${panes.length 1}`})」を使用して値を再割り当てします。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応配列が変更されたのに更新されない場合はどうすればよいですか?

react の状態配列の要素の属性が変更されると、setState ページが更新されません

コードを記述するプロセス中に、直接使用すると次のことがわかります。状態を変更するには、push やその他のメソッドを使用するのが当然です。言い換えると、push は元の配列を変更するため、配列を更新する必要がありますが、レンダリングされた状態は変更されません。

今日私が遭遇した問題は、コンポーネント内の配列要素を変更した後、データは変更されましたが、ページは再レンダリングされませんでした。

これは、コンポーネントが変更を認識できなかったためです。配列なので、ページは再レンダリングされません。

したがって、コンポーネントが変更を認識している限り、更新効果を実現できます。

理由:

これは js によるもので、配列の割り当ては参照によって渡されます。array.push は配列に対応するメモリ ブロックを直接変更するのと同等ですが、react 内の比較に使用される配列のメモリはsetState は変更されず、同じメモリを指します。setState は浅い比較のみを行うため、再レンダリングはトリガーされません。

スプレッド演算子を使用して新しい配列を作成し、メモリ参照を変更できます

要件:

解決策: 分解後の再割り当て

const onClick = (key) => {// tab点击函数
    if (key === 'addTab') {
      panes.push({
        key: panes.length,
        tab: `筛选记录${panes.length + 1}`
      })
      setPanes([...panes])
    }
  }

推奨学習: 「react ビデオ チュートリアル 」

以上が反応配列の変更が更新されない場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。