反応エラー: 状態に追加するときに項目が反復可能ではありません

Question

現在、スプレッド演算子を使用して React の配列に項目をプッシュしようとしていますが、次のエラーが発生します。

PlacesForm.jsx 内の PhotoUploader コンポーネントでエラーが発生します。以下のコンポーネントにコードを組み込みました。

PlacesForm.jsx：

リーリー

このエラーは、addPhotobyLink() 関数と UploadPhoto() 関数で発生します。投稿リクエストとバックエンドは正常に動作しており、両方に「ファイル名」が定義されていますが、「setAddedPhotos」部分に問題があります。コンポーネント自体 (PhotoUploader.jsx) は次のとおりです:

リーリー

これまでに試したこと:

ああああ

Answer 1

React では、ステータス更新関数を渡すことは通常推奨されません

これを行う理由の 1 つは、不必要な再レンダリングが発生し、コードの推論が困難になる可能性があることです。子コンポーネントが setAddedPhotos 関数をプロップとして受け取り、それを呼び出すと、親コンポーネントの状態更新がトリガーされ、親コンポーネントとそのすべての子の再レンダリングがトリガーされます。これは、コンポーネント ツリーが大きい場合や状態が頻繁に変化する場合、不必要な再レンダリングが大量に発生する可能性があるため、問題となる可能性があります。

もう 1 つの理由は、React を使用する主な利点の 1 つであるカプセル化の原則に違反する可能性があることです。カプセル化とは、各コンポーネントが独自の独立した状態と動作を持つ必要があり、親コンポーネントや兄弟コンポーネントの状態を直接変更しないことを意味します。子コンポーネントが状態アップデータ関数を prop として受け取ると、その親コン​​ポーネントの状態にアクセスして変更できるため、コンポーネント ツリーの動作を推論することがさらに困難になる可能性があります。

setAddedPhotos 関数を子コンポーネントに渡す代わりに。このように動作関数を渡すことができます。

リーリー