a React state works perfectly on my localhost but when I do the hosting doesn’t work

Asked

Viewed 21 times

-1

Gallery export function () { const [estadogaleria, setestadogaleria] = useState (false) const [indice_galeria, setindice_galeria] = useState (0) const [indicehome, setindicehome] = useState (0) const [indicemostrado_galeria, setindicemostrado_galeria] = useState (1) const [total_itens_array, settotal_itens_array] = useState (') const aguia = [ '/images/aguia/aguia1.png', '/images/aguia/aguia2.png', '/images/aguia/aguia3.png', '/images/aguia/aguia4.png', '/images/aguia/aguia5.png', ]

    const cobra = [
      '/imagens/cobra/cobra1.png',
      '/imagens/cobra/cobra2.png',
      '/imagens/cobra/cobra3.png',
      '/imagens/cobra/cobra4.png',
      '/imagens/cobra/cobra5.png',
    ]
    const gorila = [
      '/imagens/gorila/gorila1.png',
      '/imagens/gorila/gorila2.png',
      '/imagens/gorila/gorila3.png',
      '/imagens/gorila/gorila4.png',
      '/imagens/gorila/gorila5.png',
    ]
    cavalo const = [
      '/imagens/horse/horse1.png',
      '/imagens/horse/horse2.png',
      '/imagens/horse/horse3.png',
      '/imagens/horse/horse4.png',
    ]
    const leao = [
      '/imagens/leao/leao1.png',
      '/imagens/leao/leao2.png',
      '/imagens/leao/leao3.png',
      '/imagens/leao/leao4.png',
      '/imagens/leao/leao5.png',
    ]

    const pitbull = [
      '/imagens/pitbull/pitbull1.png',
      '/imagens/pitbull/pitbull2.png',
      '/imagens/pitbull/pitbull3.png',
      '/imagens/pitbull/pitbull4.png',
    ]
    
    

    tubarão const = [
      '/imagens/shark/shark1.png',
      '/imagens/shark/shark2.png',
      '/imagens/shark/shark3.png',
      '/imagens/shark/shark4.png',
    ]
    
    const urso = [
      '/imagens/urso/urso1.png',
      '/imagens/urso/urso2.png',
      '/imagens/urso/urso3.png',
      '/imagens/urso/urso4.png',
      '/imagens/urso/urso5.png',
      '/imagens/urso/urso6.png',
    ]
    
    

   const [imagemGaleria, setimagemGaleria] = useState (null)
  
   
  const teste = useEffect (() => {
   
    if (indicehome === 1) {
      setimagemGaleria (aguia [indice_galeria])
      if (indice_galeria> = aguia.length) {
       setindice_galeria (aguia.length-1)
      }
      if (indicemostrado_galeria> aguia.length) {
        setindicemostrado_galeria (aguia.length)
      }
    }

 
    if (indicehome === 2) {
      setimagemGaleria (cobra [indice_galeria])
      if (indice_galeria> = cobra.length) {
        setindice_galeria (cobra.length-1)
       }
       if (indicemostrado_galeria> cobra.length) {
        setindicemostrado_galeria (cobra.length)
      }
    }

    if (indicehome === 3) {
      setimagemGaleria (gorila [indice_galeria])
      if (indice_galeria> = gorila.length) {
        setindice_galeria (gorila.length-1)
       }
       if (indicemostrado_galeria> gorila.length) {
        setindicemostrado_galeria (gorila.length)
      }
    }

    if (indicehome === 4) {
      setimagemGaleria (horse [indice_galeria])
      if (indice_galeria> = horse.length) {
        setindice_galeria (horse.length-1)
       }
       if (indicemostrado_galeria> horse.length) {
        setindicemostrado_galeria (horse.length)
      }
    }

    if (indicehome === 5) {
      setimagemGaleria (leao [indice_galeria])
      if (indice_galeria> = leao.length) {
        setindice_galeria (leao.length-1)
       }
       if (indicemostrado_galeria> leao.length) {
        setindicemostrado_galeria (leao.length)
      }
    }

    if (indicehome === 6) {
      setimagemGaleria (pitbull [indice_galeria])
      if (indice_galeria> = pitbull.length) {
        setindice_galeria (pitbull.length-1)
       }
       if (indicemostrado_galeria> pitbull.length) {
        setindicemostrado_galeria (pitbull.length)
      }
  
    }

    if (indicehome === 7) {
      setimagemGaleria (shark [indice_galeria])
      if (indice_galeria> = shark.length) {
        setindice_galeria (shark.length-1)
       }
       if (indicemostrado_galeria> shark.length) {
        setindicemostrado_galeria (shark.length)
      }
    }

    if (indicehome === 8) {
      setimagemGaleria (urso [indice_galeria])
      if (indice_galeria> = urso.length) {
        setindice_galeria (urso.length-1)
       }
       if (indicemostrado_galeria> urso.length) {
         setindicemostrado_galeria (urso.length)
       }
    }

  }, [indice_galeria])
     

Function showgallery () {

      setestadogaleria (! estadogaleria)
    setindice_galeria (0)
    setindicemostrado_galeria (1)
   }

     Retorna(
       <>
   <div onClick = {showgaleria} className = 'galeriahome'>

       <img onClick = {() => {setindicehome (1); setimagemGaleria (aguia [indice_galeria]); settotal_itens_array (aguia.length)}} id = 'aguia'src =' / imagens / aguia / aguia1.png '/>
       <img onClick = {() => {setindicehome (2); setimagemGaleria (cobra [indice_galeria]); settotal_itens_array (cobra.length)}} id = 'cobra' src = '/ imagens / cobra / cobra1.png' />
       <img onClick = {() => {setindicehome (3); setimagemGaleria (gorila [indice_galeria]); settotal_itens_array (gorila.length)}} id = 'gorila'src =' / imagens / gorila / gorila1.png '/>
       <img onClick = {() => {setindicehome (4); setimagemGaleria (horse [indice_galeria]); settotal_itens_array (horse.length)}} id = 'horse'src =' / imagens / horse / horse1.png '/>
       <img onClick = {() => {setindicehome (5); setimagemGaleria (leao [indice_galeria]); settotal_itens_array (leao.length)}} id = 'leao' src = '/ imagens / leao / leao1.png' />
       <img onClick = {() => {setindicehome (6); setimagemGaleria (pitbull [indice_galeria]); settotal_itens_array (pitbull.length)}} id = 'pitbull' src = '/ imagens / pitbull / pitbull1.png' />
       <img onClick = {() => {setindicehome (7); setimagemGaleria (shark [indice_galeria]); settotal_itens_array (shark.length)}} id = 'shark' src = '/ imagens / shark / shark1.png' />
       <img onClick = {() => {setindicehome (8); setimagemGaleria (urso [indice_galeria]); settotal_itens_array (urso.length)}} id = 'urso' src = '/ imagens / urso / urso1.png' />
     
   </div>;

   <div className = {estadogaleria? 'GaleriaVisible': 'GaleriaClosed'}>

      <img src = {imagemGaleria} />
      <div> {indicemostrado_galeria} / {total_itens_array} </div>


     <button id = 'seta para a esquerda' onClick = {() => {
     setindice_galeria (indice_galeria-1)
     setindicemostrado_galeria (indicemostrado_galeria-1)
       if (indice_galeria <= 0) {
            setindice_galeria (0)
         }
       if (indicemostrado_galeria <= 1) {
         setindicemostrado_galeria (1)
       }

      }
     }> </button>
     

     <button id = 'seta para a direita' onClick = {() => {
     setindice_galeria (indice_galeria + 1)
     
     setindicemostrado_galeria (indicemostrado_galeria + 1)

     }}  
      > </button>

     
   </div>


   </>
    
     )

}

  • SOLVED !!! IT WAS A BUG OF MY GOOGLE CHROME because Aundo opened by the edge worked perfectly .

  • Please clarify your problem or provide additional details in order to highlight exactly what you need. The way it’s written these days it’s hard to tell exactly what you’re asking.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.