如何解决“此导航器同时具有导航和容器道具”错误

Posted 2023-02-22

【中文标题】如何解决“此导航器同时具有导航和容器道具”错误

【英文标题】：How to resolve 'this navigator has both navigation and container props' error

【发布时间】：2018-11-08 10:24:39

【问题描述】：

使用 react-navigator 时出现错误提示

这个导航器有导航和容器属性。因此尚不清楚它是否应该拥有自己的状态。删除道具：'completedOrders,isLoading,hasError,getCompletedOrders'。如果导航器应该从导航道具中获取其状态。如果导航器应该保持自己的状态，不要传递导航道具

如何解决这个问题。？我想将 completedOrders 传递给 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】：

解决方法对于任何坚持这一点的人：使用 mergeProps（react-redux 连接的第三个参数）和 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);

P.S.：没有用 mapDispatchToProps 检查它，但认为它应该也可以工作。

【讨论】：

感谢@Vitaliy！您能否解释一下正在发生的事情或为什么需要/工作？