84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
ユーザーが一度に 1 つ以上の画像をアップロードできる画像アップロード コンポーネントがあります。ユーザーが画像をアップロードするときは、常に useState() を使用して状態を更新するようにしています。しかし、ステータスはすぐには更新されませんでした。次のコードを更新して適切に動作させるにはどうすればよいですか。
https://stackblitz.com/edit/react-ujcbjh?file=src/App.js
非プリミティブ型で useState を使用する場合は常に注意する必要があります。
React ドキュメントの次の 2 ページにいくつかの手順が記載されています:
つまり、react はObject.isを使用して、setStateの呼び出しの間に状態が変化したかどうかを判断します。オブジェクトと配列の場合、その内容が変更された場合でも、これは true を返す場合があります。
Object.is
setState
React では、useState フックは状態をすぐには更新しません。ステータスの更新は非同期です。つまり、更新されたステータス値は、ステータス セッター関数を呼び出した直後には利用できない可能性があります。
この問題を解決するには、useEffect フックを使用してファイルの状態の変更をリッスンし、更新時に必要なアクションを実行します。 useEffect フックを含むコードの更新バージョンは次のとおりです:
この更新されたコードでは、useEffect フックの 2 番目のパラメーター配列で依存関係として file を指定することで、ファイルの状態の変更をリッスンする useEffect フックを追加しました。ファイルのステータスが更新されるたびに、useEffect コールバック関数内のコードが実行されます。 useEffect フック内の更新されたファイル値を使用して、必要な操作を実行できます。
useEffect フックを使用すると、ステータスの更新後に更新されたステータス値が正しく記録されることがわかります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
非プリミティブ型で useState を使用する場合は常に注意する必要があります。
React ドキュメントの次の 2 ページにいくつかの手順が記載されています:
つまり、react は
Object.isを使用して、setStateの呼び出しの間に状態が変化したかどうかを判断します。オブジェクトと配列の場合、その内容が変更された場合でも、これは true を返す場合があります。React では、useState フックは状態をすぐには更新しません。ステータスの更新は非同期です。つまり、更新されたステータス値は、ステータス セッター関数を呼び出した直後には利用できない可能性があります。
この問題を解決するには、useEffect フックを使用してファイルの状態の変更をリッスンし、更新時に必要なアクションを実行します。 useEffect フックを含むコードの更新バージョンは次のとおりです:
リーリーこの更新されたコードでは、useEffect フックの 2 番目のパラメーター配列で依存関係として file を指定することで、ファイルの状態の変更をリッスンする useEffect フックを追加しました。ファイルのステータスが更新されるたびに、useEffect コールバック関数内のコードが実行されます。 useEffect フック内の更新されたファイル値を使用して、必要な操作を実行できます。
useEffect フックを使用すると、ステータスの更新後に更新されたステータス値が正しく記録されることがわかります。