書き換えられたタイトルは次のとおりです: React 状態の初期更新が発生していません

Question

ユーザーが一度に 1 つ以上の画像をアップロードできる画像アップロード コンポーネントがあります。ユーザーが画像をアップロードするときは、常に useState() を使用して状態を更新するようにしています。しかし、ステータスはすぐには更新されませんでした。次のコードを更新して適切に動作させるにはどうすればよいですか。

リーリー

https://stackblitz.com/edit/react-ujcbjh?file=src/App.js

Answer 1

非プリミティブ型で useState を使用する場合は常に注意する必要があります。

React ドキュメントの次の 2 ページにいくつかの手順が記載されています:

• https://react.dev/learn/updating-objects-in-state
• https://react.dev/learn/updating-arrays-in-state

つまり、react は Object.is を使用して、setState の呼び出しの間に状態が変化したかどうかを判断します。オブジェクトと配列の場合、その内容が変更された場合でも、これは true を返す場合があります。

Answer 2

React では、useState フックは状態をすぐには更新しません。ステータスの更新は非同期です。つまり、更新されたステータス値は、ステータス セッター関数を呼び出した直後には利用できない可能性があります。

この問題を解決するには、useEffect フックを使用してファイルの状態の変更をリッスンし、更新時に必要なアクションを実行します。 useEffect フックを含むコードの更新バージョンは次のとおりです:

リーリー

この更新されたコードでは、useEffect フックの 2 番目のパラメーター配列で依存関係として file を指定することで、ファイルの状態の変更をリッスンする useEffect フックを追加しました。ファイルのステータスが更新されるたびに、useEffect コールバック関数内のコードが実行されます。 useEffect フック内の更新されたファイル値を使用して、必要な操作を実行できます。

useEffect フックを使用すると、ステータスの更新後に更新されたステータス値が正しく記録されることがわかります。