状態からキーを削除するとレンダリングに問題が発生する

Question

私はtodoのグループをのグループに作成できるTodoアプリケーションを作成しているとします。

私の状態はそれほどのように構成されている：私はremoveGroup動作を実現しています

state = { 

    groups: { 
    groupName: [todoId], 
    }, 

    todos: { 
    ids: [todoId], 
    byId: { 
     todoId: todoObj, 
    }, 
    }, 
} 

。 groupsレデューサーは、指定されたグループ名からすべてtodoIdを選択し、それらをデフォルトグループに移動し、古いグループを削除します。私はその状態を変えていない。

私は3つの反応成分、TodoGroups,GroupおよびTodoを持っています。

• TodoGroupsgetGroupNames(state)セレクタからgroupNames小道具に基づいて、Group Sのリストをレンダリングします。

• Groupが

getGroupTodoIds(state, groupName)セレクタからtodoIds小道具に基づいて、getGroupNamesをTodoのリストをレンダリングするだけObject.keys(state)を実行し、アルファベット順に指示します。今

---

、ここに私の問題です：

私はremoveGroupをトリガーすると、私はtodoIds小道具が未定義であることをPropType警告が表示されます。その警告は私が今削除したGroupからのものです。

新しい小道具を受け取る前にTodoGroupsが返される前に、Groupが再レンダリングされます。そのため、古い名前が使用されており、古いグループがもう存在しないため、getGroupTodoIdsはundefinedを返します。

この問題の適切な解決方法を教えてください。 getGroupTodoIds、mapStateToProps、さらにはGroup.defaultPropsのいずれかの空の配列に戻りますが、これは間違った方向に進んでいるようです。

Answer 1

適切な解決策は、おそらくGroupコンポーネントに接続しないで、接続されたTodoGroupsコンポーネントから必要な情報を渡すことです。

問題はスケジューリングされています：状態が変更されたときに接続されたすべてのコンポーネントに警告しますが、はこれらのコンポーネントの一部である自体が状態に依存します。親がレンダリングを完了するまで、どのように反応して子を更新しないと知っていますか？あなたはこれについてもっと読むことができ、他の解決策を見つけることができますhere、私は完全に最新のものではありません。

また、getGroupTodoIds(state, groupName)セレクタを使用しても何も得られない可能性があります。セレクタは基本的に、引数が変更されるたびに再計算されるメモ型関数です。すべてのレンダリングで複数の異なる groupName値を呼び出すと、毎回再計算されます。