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

P.S .：并未使用mapDispatchToProps进行检查，但认为它也应该起作用。

如何解决'此导航器具有导航和容器道具'错误

1 个答案: