Solo estoy usando componentes funcionales en mi proyecto y, a pesar de eso, recibo este error: TypeError no detectado: no se puede llamar a una clase como una función.
Esto es parte del componente principal donde aparece el error: (el problema es con el componente "withCheckCountry")
<Switch> <Route exact path="/" component={Home} /> <Route exact path="/reset-password/:token" component={RestPass} /> <Route path="/programs" component={About} /> <Route path="/login" component={Login}> {loggedIn() && <Redirect to={redirectionPath()} />} </Route> <Route path="/signUp" component={SignUp}> {loggedIn() && <Redirect to={redirectionPath()} />} </Route> <Route path="/country/:countryCode" component={withCheckCountry(CountryApp, availableCountry, loadingCountry)} /> <Redirect to="/" /> </Switch>y aquí está el componente "withCheckCountry":
import React, {useState, useEffect, memo} from 'react'; import PropTypes from 'prop-types'; import { Redirect } from 'react-router-dom'; import { toast } from 'react-toastify'; import ToastBody from "components/toastBody/toast"; import { FormattedMessage, injectIntl } from "react-intl"; const withCheckCountry = (Component, availableCountry, loadingCountry) => ({ ...props }) => { //console.log("props = "+JSON.stringify(props)); if (!loadingCountry) { const { countryCode } = props.match.params; const isCountryExist = availableCountry.some( country => country.countryCode === countryCode.toLocaleUpperCase(), ); const [errorTitle, setErrorTitle] = useState(intl.formatMessage(messages.errorTitle)); const [countryNotExist, setCountryNotExist] = useState(intl.formatMessage(messages.countryNotExist)); useEffect(() => { setErrorTitle(intl.formatMessage(messages.errorTitle)); setCountryNotExist(intl.formatMessage(messages.countryNotExist)); }, [intl]); if (!isCountryExist) { toast(() => <ToastBody title={errorTitle} message={countryNotExist} />); return <Redirect to="/" />; } } return <Component {...props} />; }; withCheckCountry.propTypes = { availableCountry: PropTypes.object, }; export default injectIntl(withCheckCountry);este error no apareció hasta que agregué "injectIntl" al exportar el componente, y lo necesito para obtener intl de los accesorios, como puede ver en la documentación aquí si está interesado.
está llamando al componente "withCheckCountry" como si fuera una función:
prueba esto:
<Route path="/country/:countryCode" component={(props) => <withCheckCountry {...props} />} />