web-dev-qa-db-ja.com

解決方法 'このナビゲーターにはナビゲーションとコンテナの両方の小道具があります'エラー

React-navigatorを使用すると、次のようにエラーが発生します

このナビゲーターには、ナビゲーションとコンテナの両方の小道具があります。したがって、独自の状態を所有する必要があるかどうかは不明です。小道具を削除します： 'completedOrders、isLoading、hasError、getCompletedOrders'。ナビゲーターがナビゲーションプロップから状態を取得する必要がある場合。ナビゲーターが独自の状態を維持する必要がある場合は、ナビゲーション小道具を渡さないでください

この問題を解決する方法。 completeOrdersを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);
reactjsreact-nativereact-reduxreact-navigation
7
Dhiraj

回避策それに固執した人のために：このエラーを回避するには、mergeProps（react-redux接続の3番目のパラメーター）と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);

追伸：mapDispatchToPropsで確認しませんでしたが、機能するはずだと思います。

3
Vitaliy