Как решить эту ошибку: у этого навигатора есть и навигация, и контейнерные реквизиты - PullRequest
Новая
       51

Как решить эту ошибку: у этого навигатора есть и навигация, и контейнерные реквизиты

0 голосов
/ 29 мая 2018

Когда я использую реагирующий навигатор, я получаю сообщение об ошибке

, у этого навигатора есть как навигация, так и контейнер.поэтому неясно, должно ли оно иметь собственное государство.Удалите реквизиты: 'completeOrders, isLoading, hasError, getCompletedOrders'.если навигатор должен получить свое состояние из навигационной стойки.Если навигатор должен поддерживать свое собственное состояние, не передавайте реквизиты навигации

Как решить эту проблему.?Я хочу передать завершенные заказы Tabnavigator (AdminCompletedOrdersTab).

Ниже мой код 

const AdminCompletedOrdersTab = TabNavigator({
    completedOrdersTab: { screen: CompletedOrders },
    rejectedOrdersTab: { screen: RejectedOrders },
    cancelledOrdersTab: { screen: CancelledOrders }
});

class CompletedOrdersScreen extends Component {
    static navigationOptions = {
        title: "Completed Orders"
    }

    componentDidMount() {
        this.props.getCompletedOrders(this.props.user);
    }
    render() {
        return(
            <AdminCompletedOrdersTab {...this.props}/>
        )

    }
}

const mapStateToProps = (state) => {
    return ({
        completedOrders: state.completedOrders.completedOrders,
        isLoading: state.completedOrders.isLoading,
        hasError: state.completedOrders.hasError
    })
}

const mapDispatchToProps = (dispatch) => {
    return ({
        getCompletedOrders: bindActionCreators(getCompletedOrders, dispatch)
    })
}



export default connect(mapStateToProps, mapDispatchToProps)(CompletedOrdersScreen);

1 Ответ

0 голосов
/ 16 июля 2018

Обходной путь для тех, кто застрял с этим: используйте mergeProps (3-й параметр connect-redux connect) и screenProps, чтобы избежать этой ошибки.

Например, этот код станет: 

const AdminCompletedOrdersTab = TabNavigator({
    completedOrdersTab: { screen: CompletedOrders },
    rejectedOrdersTab: { screen: RejectedOrders },
    cancelledOrdersTab: { screen: CancelledOrders }
});

class CompletedOrdersScreen extends Component {
    static navigationOptions = {
        title: "Completed Orders"
    }

    componentDidMount() {
        this.props.screenProps.getCompletedOrders(this.props.user);
    }
    render() {
        return(
            <AdminCompletedOrdersTab 
               {...this.props} 
               {...{/* anything you need from screenProps */}}
            />
        )

    }
}

const mapStateToProps = (state) => {
    return ({
        completedOrders: state.completedOrders.completedOrders,
        isLoading: state.completedOrders.isLoading,
        hasError: state.completedOrders.hasError
    })
}

const mapDispatchToProps = (dispatch) => {
    return ({
        getCompletedOrders: bindActionCreators(getCompletedOrders, dispatch)
    })
}

const mergeProps = (state, dispatch, ownProps) => {
    return ({
        ...ownProps,
        screenProps: {
          ...ownProps.screenProps,
          ...state,
          ...dispatch,
        }
    })
}


export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(CompletedOrdersScreen);

PS: не проверял это с mapDispatchToProps, но думаю, что это также должно работать.

...