0

No logro acceder a las props del state, lo que intento hacer es que muestre o no una barra de navegación en función de si una propiedad esta en false o true.

Cuando intento acceder a la propiedad showMainHeader de esta forma this.props.config.showMainHeader me da el siguiente error:

Property 'config' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>', no se si tengo que declararlo de alguna forma antes.El console log muestra lo siguiente por si es de utilidad: {config: {…}, dispatch: ƒ}
config: {moduleId: 'HOME_MODULE', showMainHeader: false, showDetailHeader: true, detailTitle: 'Actualidad!'}
dispatch: ƒ (action)
[[Prototype]]: Object
import React, { Component } from 'react'
import { Fragment } from 'react'
import { Disclosure, Menu, Transition } from '@headlessui/react'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { connect } from 'react-redux'

const navigation = [
  { name: 'Inicio', href: '#', current: true },
  { name: 'Colegio', href: '#', current: false },
  { name: 'Documentos', href: '#', current: false },
  { name: 'Mi perfil', href: '#', current: false },
]

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

function mapStateToProps(state) {
    const { configNavigation } = state
    return { config: configNavigation }
  }
  

  class  Navigation extends Component {
      constructor (props) {
        super(props);
        this.state = { config: {} };
    } 
 
    render () {
        console.log(this.props);
    return (
            <div>
                <nav className="md:bg-white bg-teal-600 w-100 md:shadow fixed w-full z-20 top-0 left-0">
                <div className="mx-auto max-w-100 px-4 sm:px-6 lg:px-8">
                    <div className="relative flex h-16 items-center justify-between">
                    
                    <div className="flex flex-1 items-center justify-start sm:items-stretch sm:justify-start">
                        <div className="flex flex-shrink-0 items-center">
                        {/* Phone logo */}
                        {/* <img className="block h-9 w-auto md:hidden" src="../logo-icofcv-white.svg" alt="Ilustre Colegio Oficial de Fisioterapeutas Comunidad Valenciana" /> */}
                        {/* Desktop logo */}
                        <img className="hidden h-9 w-auto md:block" src="../logo-icofcv.svg" alt="Ilustre Colegio Oficial de Fisioterapeutas Comunidad Valenciana" />
                        </div>
                        <div className="hidden sm:ml-6 md:block">
                        <div className="flex space-x-1 desktop-navigation">
                            <ul className="flex bg-white md:flex-row md:space-x-4 md:mt-0 md:text-sm md:font-medium">
                                <li>
                                    <a href="/#/" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium active" aria-current="page">
                                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-home mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                            <polyline points="5 12 3 12 12 3 21 12 19 12" />
                                            <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                                            <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                                        </svg>
                                    Inicio</a>
                                </li>
                                <li>
                                    <a href="/#/college" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium">
                                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-building-skyscraper mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                            <line x1="3" y1="21" x2="21" y2="21" />
                                            <path d="M5 21v-14l8 -4v18" />
                                            <path d="M19 21v-10l-6 -4" />
                                            <line x1="9" y1="9" x2="9" y2="9.01" />
                                            <line x1="9" y1="12" x2="9" y2="12.01" />
                                            <line x1="9" y1="15" x2="9" y2="15.01" />
                                            <line x1="9" y1="18" x2="9" y2="18.01" />
                                        </svg>
                                    Colegio</a>
                                </li>
                                <li>
                                    <a href="/#/docs" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium">
                                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-files mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                            <path d="M15 3v4a1 1 0 0 0 1 1h4" />
                                            <path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" />
                                            <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
                                        </svg>
                                    Documentación</a>
                                </li>
                                <li>
                                    <a href="/#/profile" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium">
                                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-user mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                            <circle cx="12" cy="7" r="4" />
                                            <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                                        </svg>
                                    Mi perfil</a>
                                </li>
                            </ul>
                        </div>
                        </div>
                    </div>
                    <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
                        <ul className="items-center hidden md:flex">
                            <li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
                                <a href="https://twitter.com/Icofcv" target="_blank">
                                <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-twitter" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
                                </svg>
                                </a>
                            </li>
                            <li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
                                <a href="https://www.youtube.com/channel/UCYDxDmCQ_xfzk0ZnAkMt2WQ?view_as=subscriber" target="_blank">
                                <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-youtube" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <rect x="3" y="5" width="18" height="14" rx="4" />
                                    <path d="M10 9l5 3l-5 3z" />
                                </svg>
                                </a>
                            </li>
                            <li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
                                <a href="https://www.instagram.com/icofcv/" target="_blank">
                                <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-instagram" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <rect x="4" y="4" width="16" height="16" rx="4" />
                                    <circle cx="12" cy="12" r="3" />
                                    <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
                                </svg>
                                </a>
                            </li>
                            <li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
                                <a href="https://www.facebook.com/colegiofisioterapeutascv" target="_blank">
                                <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-facebook" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
                                </svg>
                                </a>
                            </li>
                        </ul>
                    </div>
                    </div>
                </div>
                </nav>
                
                {/* Navegación móvil */}

                { 
                   this.props.config.showMainHeader === false ?

                     <div className="fixed bottom-0 w-100 h-14 flex justify-around items-center d-none bg-white nav-phone pt-2 z-10">
                    <a href="/#/" className="flex flex-column items-center active">
                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-home mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <polyline points="5 12 3 12 12 3 21 12 19 12" />
                            <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                            <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                        </svg>
                        <span className="btm-nav-label">Inicio</span>
                    </a>
                    <a href="/#/college" className="flex flex-column items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-building-skyscraper mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <line x1="3" y1="21" x2="21" y2="21" />
                            <path d="M5 21v-14l8 -4v18" />
                            <path d="M19 21v-10l-6 -4" />
                            <line x1="9" y1="9" x2="9" y2="9.01" />
                            <line x1="9" y1="12" x2="9" y2="12.01" />
                            <line x1="9" y1="15" x2="9" y2="15.01" />
                            <line x1="9" y1="18" x2="9" y2="18.01" />
                        </svg>
                        <span className="btm-nav-label">Colegio</span>
                    </a>
                    <a href="/#/docs" className="flex flex-column items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-files mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M15 3v4a1 1 0 0 0 1 1h4" />
                            <path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" />
                            <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
                        </svg>
                        <span className="btm-nav-label">Documentación</span>
                    </a>
                    <a href="/#/profile" className="flex flex-column items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-user mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <circle cx="12" cy="7" r="4" />
                            <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                        </svg>
                        <span className="btm-nav-label">Mi perfil</span>
                    </a>
                </div>
                :
                <div className="fixed bottom-0 w-100 h-14 flex justify-around items-center md:hidden bg-white nav-phone pt-2 z-10">
                <a href="/#/" className="flex flex-column items-center active">
                    <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-home mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <polyline points="5 12 3 12 12 3 21 12 19 12" />
                        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                    </svg>
                    <span className="btm-nav-label">Inicio</span>
                </a>
                <a href="/#/college" className="flex flex-column items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-building-skyscraper mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <line x1="3" y1="21" x2="21" y2="21" />
                        <path d="M5 21v-14l8 -4v18" />
                        <path d="M19 21v-10l-6 -4" />
                        <line x1="9" y1="9" x2="9" y2="9.01" />
                        <line x1="9" y1="12" x2="9" y2="12.01" />
                        <line x1="9" y1="15" x2="9" y2="15.01" />
                        <line x1="9" y1="18" x2="9" y2="18.01" />
                    </svg>
                    <span className="btm-nav-label">Colegio</span>
                </a>
                <a href="/#/docs" className="flex flex-column items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-files mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <path d="M15 3v4a1 1 0 0 0 1 1h4" />
                        <path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" />
                        <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
                    </svg>
                    <span className="btm-nav-label">Documentación</span>
                </a>
                <a href="/#/profile" className="flex flex-column items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-user mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <circle cx="12" cy="7" r="4" />
                        <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                    </svg>
                    <span className="btm-nav-label">Mi perfil</span>
                </a>
            </div>
                }
            </div>
               


    )
   }
}


export default connect(mapStateToProps)(Navigation)

1 respuesta 1

0

Creo que estas configurando de forma incorrecta el connect

const MyComponent = ({ configNavigation }) => {
   //... code
}

const mapStateToProps = ({ configNavigation }) => ({ configNavigation })

export default connect(mapStateToProps)(MyComponent)

El mapStateToProps es quien tiene los valores que necesitas del store; luego con connect le pasas esos valores al componente para que los puedas usar.

De todas maneras, considera realizar la conexión con el store, utilizando el hook useSelector, ya que como indica la página oficial de react-redux, se recomienda utilizar el hook en desmedro de connect por una futura y posible deprecación.

Con el hook sería

import { useSelector, shallowEqual } from 'react-redux'

const MyComponent = () => {
   const { configNavigation } = useSelector(state => state, shallowEqual)

   //... code
}

shallowEqual es una función que se encarga de manejar la comparación a niveles más profundos de la versión actual del store vs la versión anterior, ya que por defecto, el hook useSelector sólo realiza esta comparación a nivel "superficial" (===), lo que daría posibles impactos en la performance del aplicativo.

1
  • e usado el useSelector como me has sugerido y a funcionado a la perfección, muchas gracias por la ayuda. Commented el 16 sept. 2022 a las 6:19

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.