通知ウィジェットのカスタム フックuseNotificationsがあります。このフックは、次の要素を含む配列を返します (ant.design メッセージ API に似ています):
add: 新しい通知を追加する関数remove: 通知IDを取得して通知を削除する関数contextHandler: JSXユーザーが add を呼び出すと、通知を削除するために使用できる ID が与えられます
この質問は特に削除機能に関するものです。新しい通知を追加した直後にこの関数を呼び出しているため、関数は古いリストのコピーを受け取るため、新しい要素はなく、エラーがスローされます。コンポーネントが同じ API を使用するように修正するにはどうすればよいですか?
useNotification フック 使用方法
Codesandbox (テストのために、setTimeout を実行すると、3 秒以内に remove() が呼び出されます): https://codesandbox.io/s/goofy-smoke -5q7dw3?ファイル=/src/App.js:405-440
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
remove関数で、最新のステータス値にアクセスできる ステータス アップデータ関数 を使用することができます。これにより、コンポーネントがremove()で再レンダリングされる前に、新しいlist状態にアクセスできるようになります。注: 現在、ネストされたオブジェクトの
isMountedプロパティをfalseに設定することで、元の状態を変更しています。配列をコピーする場合でも、再レンダリングの問題を避けるために、更新されるオブジェクトもコピーする必要があります。ここでは、状態の最新の値にアクセスし、状態の突然変異を回避する方法に関するいくつかの変更を示します。 リーリー
以下の例を参照してください: