React 純粋関数コンポーネント setState がページ更新を更新しない問題の解決方法

問題の説明:

const [textList, setTextList] = useState(元の配列);
setTextList(新しい配列);

元の配列を変更する場合、元の配列が深い配列（複数のレイヤー）である場合、setTextListを使用して変更してもページの更新はトリガーされません。

原因分析:

これには、可変オブジェクトと不変オブジェクトの知識が必要です。Vue と React では、可変オブジェクトを更新すると、ビューが更新されることがあります。これは、Vue と React がデフォルトで浅いリスナーであり、最初のレイヤーのデータのみをリッスンするためです。内部レイヤーのデータの変更は監視されません。

解決：

ここでの私の解決策は、まず元の配列のディープ コピーを作成し、それを新しい配列に割り当て、次に新しい配列を変更して変更された新しい配列を渡すことです。これにより、ビューが更新されます。

var リスト = textList.concat();
リストを連結します(インデックス、1);
setTextList(リスト);

補足: Reactでは、フックが使用されている場合、useStateの更新はコンポーネントをレンダリングしません。

react を使用して図のようなコンポーネントを記述すると、重大な問題が見つかりました。クラスを使用して記述することを選択すると、コンポーネントを通じてレンダリングを更新するのが簡単になります。
関数コンポーネント フックを使用してコンポーネントをリファクタリングすることにしたとき、非常に難しい問題が見つかりました。onChange を使用して親コンポーネントの値を変更すると、値は変更されましたが、コンポーネントは再レンダリングされませんでした。 ? ? ?
混乱したので、値を空に設定してからクラスコンポーネントに割り当てようとしました。失敗したので、フックのライフサイクルを調べてみました。 。 。 。 ------失敗した場合は、Baidu を試してください---私も同じ問題を発見しました。 。 。最後にslice()を追加するだけでよいことがわかりました。
そこでまず問題を解決するために、図の赤い円をonChange(value.slice())に変更しました。
-----それで、この魔法の問題は解決しました。

問題は解決したので、戻って何が起こったのか見てみましょう。 。 。
ドキュメントを見ると、useStateのデータは不変（割り当て不可能なオブジェクト）でなければならないという一文が見つかりました。
つまり、ass コンポーネントの状態でも不変データの使用が推奨されていますが、setState が呼び出される限り更新がトリガーされるため、これは必須ではありません。したがって、クラス コンポーネントではこの問題は発生しません。または、空に変更してから値を割り当てることで更新をトリガーできます。
ただし、useState を再度使用する場合、同じオブジェクトが更新関数に渡されると、更新はトリガーされません。
したがって、解決策は、slice() を介して新しいオブジェクトを返して値を割り当てることであり、これが問題を解決するための鍵となります。 。 。 。

上記は、React Pure Function コンポーネントの setState 更新ページが更新されない問題の詳細な解決方法です。React の useState ページが更新されない問題の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。