React Native + Redux：なぜ "重複したキーでルートをプッシュしないでください"というエラー？

Question

私は自分のReact Nativeプロジェクト用にReduxをセットアップしました。以下は、私のナビゲーション減速（navReducer.js）です：

import { PUSH_ROUTE, POP_ROUTE } from '../Constants/ActionTypes' 
import { NavigationExperimental } from 'react-native' 

import Login from '../Components/Login' 

const { 
    StateUtils: NavigationStateUtils 
} = NavigationExperimental 

const initialState = { 
    index: 0, 
    key: 'root', 
    routes: [{ 
    key: 'login', 
    title: 'Login', 
    component: Login 
    }] 
} 

function navigationState (state = initialState, action) { 
    switch(action.type) { 

    case PUSH_ROUTE: 
     if (state.routes[state.index].key === (action.route && action.route.key)) return state 
    return NavigationStateUtils.push(state, action.route) 

    case POP_ROUTE: 
     if (state.index === 0 || state.routes.length === 1) return state 
     return NavigationStateUtils.pop(state) 

    default: 
    return state 

    } 
} 

export default navigationState 

そして、私のルートコンポーネント（NavRoot.js）で、アクションがで処理されます。

_handleBackAction() { 
    if (this.props.navigation.index === 0) { 
     return false 
    } 
    this.props.popRoute() 
    return true 
    } 

    _handleNavigate(action) { 
    switch (action && action.type) { 
     case 'push': 
     this.props.pushRoute(action.route) 
     return true 
     case 'back': 
     case 'pop': 
     return this._handleBackAction() 
     default: 
     return false 
    } 
    } 

そしてボタン（NavButton.js）によってトリガ：

_navigate(route){ 
    this.props._handleNavigate(route) 
    } 

    render(){ 
    const route = { 
     type: 'push', 
     route: { 
     key: this.props.navKey, 
     title: this.props.pageName, 
     component: this.props.componentName 
     } 
    } 

    return(
     <TouchableHighlight onPress={() => this._navigate(route)}> 
     <Text style={styles}>{pr.pageName}</Text> 
     </TouchableHighlight> 
    ) 

ボタン（NavButton.js）を初めて押すと正しく移動します。しかし、もう一度押すと、次のエラーが表示されます。should not push route with duplicated key /*'route.key: this.props.navKey' in this case*/。

すべてが意味をなさないように見えましたが、何が問題なのでしょうか？

ありがとうございます！

Answer 1

should not push route with duplicated key

keyプロパティは一意である必要があります。

あなたが同じkeyで、いくつかのシーンを作成する必要がある場合は、減速にsceneプロパティのようなものを渡すとkey値をインクリメントすることができます...

function navigation(state = guestState, action) { 
    const { index, routes } = state 

    switch (action.type) { 
    case NAV_PUSH: { 
     const nextIndex = index + 1 
     const newState = { 
     ...action.state, 
     key: `${action.state.scene}_${nextIndex}`, 
     } 

     return { 
     ...state, 
     index: nextIndex, 
     routes: [ 
      ...routes, 
      newState, 
     ], 
     } 
    } 
    ... 
} 

Answer 2

あなたの入力が来ているかどうかを確認することができますあなたのナビゲーション・リデューサ内で連続して：