0

actualmente hice un código, en el cual una pagina renderiza uno y otro componente, dependiendo del valor booleano de una propiedad pasada a través de MasStateToProps (debitCardFeatureFlagEnabled), el codigo funciona bien, la condicional que renderiza uno u otra pagina (Onboarding o DashBoard), funciona correctamente.

import * as React from 'react'
import { Redirect, Route, Switch, withRouter } from 'react-router'
import { connect } from 'react-redux'
import PropsType from 'prop-types'
import { RootState } from '~store'
import { authenticatedAppRoutes } from '~/components/app/authenticatedAppRoutes'
import { Dashboard } from './Dashboard/Dashboard'
import { Onboarding } from './Onboarding/Onboarding'
import { SupportedFeatureFlags, featureFlagEnabled } from '~types'

const { debitCard } = authenticatedAppRoutes

const mapStateToProps = ({ featureFlagState: { flags } }: RootState) => ({
  debitCardFeatureFlagEnabled: featureFlagEnabled(flags.data || [], SupportedFeatureFlags.debitCard),
})

type Props = ReturnType<typeof mapStateToProps>

const DebitCardUnifiedSignalPresentation: React.SFC<Props> = ({ debitCardFeatureFlagEnabled }) => {
  console.log(debitCardFeatureFlagEnabled)
  return (
    <Switch>
      <Route exact={true} path={debitCard.path} component={debitCardFeatureFlagEnabled ? Onboarding : Dashboard} />
      <Redirect to={debitCard.path} />
    </Switch>
  )
}

DebitCardUnifiedSignalPresentation.propTypes = {
  debitCardFeatureFlagEnabled: PropsType.bool.isRequired,
}

export const DebitCardUnifiedSignal = connect(mapStateToProps)(withRouter(DebitCardUnifiedSignalPresentation))

Sin embargo el problema es que el IDE me señala el siguiente error:

error TS2345: Argument of type 'SFC<{ debitCardFeatureFlagEnabled: boolean; }>' is not assignable to parameter of type 'ComponentType<RouteComponentProps<any, StaticContext, any>>'.
  Type 'FunctionComponent<{ debitCardFeatureFlagEnabled: boolean; }>' is not assignable to type 'FunctionComponent<RouteComponentProps<any, StaticContext, any>>'.
    Types of property 'propTypes' are incompatible.
      Type 'WeakValidationMap<{ debitCardFeatureFlagEnabled: boolean; }> | undefined' is not assignable to type 'WeakValidationMap<RouteComponentProps<any, StaticContext, any>> | undefined'.
        Type 'WeakValidationMap<{ debitCardFeatureFlagEnabled: boolean; }>' has no properties in common with type 'WeakValidationMap<RouteComponentProps<any, StaticContext, any>>'.

Y no se por que, estoy obteniendo por parte del prop, el valor booleano que requiero, pero aun asi me dice que hay una incompatibilidad en el tipo de dato de este prop que no logro entender, me podrian ayudar? gracias.

2
  • Te traduzco el error, mas solo eso ya que no uso react, el error consiste en que estas asignando un tipo de dato incompatible con el tipo de dato que deseas guardar, es decir, es como si le dijeras a Java que quieres guardar un boolean y en su lugar le pasas un String, eso fallara debido a que los tipos son diferentes.
    – Layer
    Commented el 19 jun. 2020 a las 21:40
  • Lo cual es muy raro, porque el valor que retorna es booleano. De hecho lo estoy validando con el PropTypes.
    – user179478
    Commented el 19 jun. 2020 a las 21:41

1 respuesta 1

1

Ok ya lo resolví, aparentemente era un conflicto con la función withRouter() con el que exportaba mi componente, la función es innecesaria a estas alturas, y ahora exporto mi componente sin ella, quedando asi:

export const DebitCardUnifiedSignal = connect(mapStateToProps)(DebitCardUnifiedSignalPresentation)

ya ahora mi componente sigue funcionando igual, y ya no muestra el error.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.