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

Question

使用 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);

Answer 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 检查它，但认为它应该也可以工作。