1

Intento hacer una galeria dinamica no logro que refresque la galeria como tal registro los cambios en la interfaz de seleccion y modifico el state donde tengo las imganes y la propiedad de view y en el primer run si oculta o muestra lo que por defecto ponga en visible = true sin embargo cuando cambio la categoria o galeria seleccionada si cambia mi stado catImagenes pero no se refresca el let galery :( solo ocupo que se renderize ese elemennto cada que cambie mi categoria seleccionada

import React, {useState, useEffect} from "react";
import axios from "axios";
import { Row, Col, CardGroup, Card } from 'react-bootstrap'
import './styles.css'

const BancoDeImagenes = () => {
// Contexto de obra para saber que obra esta seleccionada
const selectedObra =( isNaN( parseInt(window.localStorage.getItem("selectedObra")))) ? 1 :  parseInt(window.localStorage.getItem("selectedObra"));

const [ oobras, setOobras ] = useState()
const [ residente, setResidente ] = useState()
const [ categoriasImagen, setCategoriasImagen ] = useState()
const [ catImagenes, setCatImagenes ] = useState()    

useEffect(async () => {
    getCategoriasImagen()
    fillGelery()
    await getOObras()
}, [])
useEffect( async () => {
    getCategoriasImagen()
    fillGelery()
    await getResponsables( )
   
},[oobras,selectedObra])

const getOObras = async () =>{
    const res = await axios.get( process.env.REACT_APP_BACK_ATISA_ROUTE + 'api/oobra')
    if (res.status ===200){
        const obra = res.data.filter( obra => obra.idobra === selectedObra )
        await setOobras( obra )
    }
}

const getResponsables = async () =>{
    const res = await axios.get( process.env.REACT_APP_BACK_ATISA_ROUTE + 'api/responsable')
    if (oobras && res.status ===200){
        const getResidente = await res.data.filter( resi => resi.idResponsable === oobras[0].idResidente)
        setResidente(getResidente)
    }
}

const getCategoriasImagen = async () =>{
    const res = await axios.get( process.env.REACT_APP_BACK_ATISA_ROUTE + 'api/categoriasimagen')
    if (res.status ===200){
        const getCI = await res.data.filter( ci => ci.idobra === selectedObra)
        setCategoriasImagen(getCI)
    } 
}


 const fillGelery = () => {
    let galery = []
    if(categoriasImagen){
        categoriasImagen.forEach( cat => {
            galery.push({
            categoria : cat.nombre,
            visible : false,
            imagenes : [ 
                { key : 1, img : cat.imagen1, text : cat.texto1},
                { key : 2, img : cat.imagen2, text : cat.texto2},
                { key : 3, img : cat.imagen3, text : cat.texto3},
                { key : 4, img : cat.imagen4, text : cat.texto4},
                { key : 5, img : cat.imagen5, text : cat.texto5},
                { key : 6, img : cat.imagen6, text : cat.texto6}
            ]
        })
    });
    if (galery.length > 0){
        galery[0].visible = true
    }
    setCatImagenes(galery)        }
    
} 

const onChangeCategoriasHelper = (e) => {
    catImagenes.map( (currentValue) => { currentValue.visible = ( currentValue.categoria === e.target.value ) ? true : false })
}

let galery = <CardGroup>
    {catImagenes && catImagenes.map( categoria => {

        return(
            <div>
                {
                    <Row xs={1} md={3} className="g-4"> 
                        {categoria.imagenes.map(img => (
                            <Col>
                                <Card>
                                    <Card.Img variant="top" src={img.img} />
                                    <Card.Body>
                                        <Card.Text>
                                            {img.text}
                                        </Card.Text>
                                    </Card.Body>
                                </Card>
                            </Col>
                        ))} 
                    </Row>
                }    
            </div>
        )
        })}
</CardGroup>

return (
    <div>
        
        <Row className = "row row-header-general" >
            <Col className = "col col-header-general" >
                <section>
                    Residente : <b>{residente && residente[0].nombre}</b>
                </section>
                <section>
                    Reporte NO.:
                </section>
            </Col>
            <Col className = {"col col-header-general"} >
                <section>
                    Semanas Transcurridas:
                </section>
            </Col>
            <Col>
                <section>
                    Periodo:
                </section>
            </Col>
        </Row>
    
        <Row className = "header" >
            BITÁCORA FOTOGRÁFICA
        </Row>   
        <Row>
            <Col sm = {10}>
                {galery}
            </Col>
            <Col className = "menu-galery" sm = {2} onChange = { onChangeCategoriasHelper }>
                <b>BITÁCORA FOTOGRÁFICA</b>
                
                {catImagenes && catImagenes.map( (categoria, index ) => {

                    return(
                        <div> 
                            <input type="radio" id={categoria.categoria} name="categorias" value={categoria.categoria}/>
                            {categoria.categoria} 
                        </div>
                    )
                } )}
                
            </Col>
        </Row> 
    </div>
)}
export default BancoDeImagenes

Ese es el codigo que tengo igual este es el gist

La imgaen de el componente ya montado :) introducir la descripción de la imagen aquí

1 respuesta 1

0

No detectaba el cambio en el state de "catImagenes" ya que este lo hacia modificandolo desde un map y no usando el setCatImagenes que declare en el useState

const [ catImagenes, setCatImagenes ] = useState()    

por lo que podia usar el set del useState sin embargo declare un state que guardaba el valor seleccionado por los radio button

const [ catSelected, setCatSelected ] = useState()

y cuando modifico mi estado catImagenes en el map solo hago set de la variable catSelected con el setCatSelected que activa el render de nuestra galeria y carga las imagenes correctas

const onChangeCategoriasHelper = (e) => {
    
    catImagenes.map( (currentValue) => { 
        currentValue.visible = 
            ( currentValue.categoria === e.target.value ) 
                ? true 
                : false 
    })
    setCatSelected(e.target.value)
}

y es todo se encuentra funcionando perfectamente gracias espero que ayude a alguien que se le presente el mismo problema

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.