React Native + Redux: Почему ошибка «не должна нажимать маршрут с дублированным ключом»?

Question

У меня есть Redux для моего проекта React Native. Ниже мой навигации редуктор (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

Вы можете проверить, если ваш вход приходит последовательно в вашем навигационном редукторе:

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