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