ReactJS - カスタムフックリターン関数は内部状態の実際のデータを保存しない

Question

通知ウィジェットのカスタム フック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

Answer 1

remove 関数で、最新のステータス値にアクセスできる ステータス アップデータ関数 を使用することができます。これにより、コンポーネントが remove() で再レンダリングされる前に、新しい list 状態にアクセスできるようになります。

注: 現在、ネストされたオブジェクトの isMounted プロパティを false に設定することで、元の状態を変更しています。配列をコピーする場合でも、再レンダリングの問題を避けるために、更新されるオブジェクトもコピーする必要があります。

ここでは、状態の最新の値にアクセスし、状態の突然変異を回避する方法に関するいくつかの変更を示します。 リーリー

以下の例を参照してください: