0

Tengo el siguiente state:

this.state={
    objetivos:[],
    objetivo:null,
    unidades:[],
    fondofinancieros:[],
    users:[],
    cargar:true,
    view:{
        render:"index",
        index:0
    },
    form:{
        unidad:null,
        fondofinanciero:null,
        user:null
    },
    paginate:{
        activePage:1,
        itemsCountPerPage: 30,
        totalItemsCount:0,
        pageRangeDisplayed:5,
        textsearch:'',
    },
}

Luego en el render:

return (
    <div className="row">
        <div className="col col-md-4">
            <div className="x_panel" style={{position:"-webkit-sticky",position:"sticky","top":"70px"}}>
                <div className="row">
                    <div className="col-md-6">
                    <h2>Filtrar Por:</h2>
                    </div>
                </div>
                <div className="clearfix"></div>
                <SolicitudForm
                    form={this.state.form}
                    unidades={this.state.unidades}
                    fondofinancieros={this.state.fondofinancieros}
                    users={this.state.users}
                    onSearch={this.onSearch}
                    onChangeSelect={this.onChangeSelect}
                />
            </div>
        </div>
        <SolicitudList
            objetivos={this.state.objetivos}
            onChangeView={this.onChangeView}
        />
        <Pagination
          activePage={this.state.paginate.activePage}
          itemsCountPerPage={this.state.paginate.itemsCountPerPage}
          totalItemsCount={this.state.paginate.totalItemsCount}
          pageRangeDisplayed={this.state.paginate.pageRangeDisplayed}
          onChange={this.handlePageChange}
        />
    </div>
        )

El problema esta dentro de SolicitudList:

const SolicitudList=({objetivos,onChangeView})=>{
    return (
        <div className="col col-md-8">
            {
                objetivos.map((obj) => <TargetaSolicitud 
                                        key={Math.floor(Math.random() * 100000)} 
                                        objetivo={obj}
                                        onChangeView={onChangeView}
                                        /> 
                            )
            }
        </div>
        )
}

Específicamente en TargetaSolicitud donde tengo el código para mostrar la imagen:

<img src={`${URL_BASE}/api/imagen_user/${objetivo.user==null?"user.png":objetivo.user.foto}?api_token=${API_TOKEN}`} title={objetivo.user==null?"": userFullname(objetivo.user)} />

El cual descarga una imagen de una api hecha en laravel.

Todo funciona hasta que utilizo la funcion onChangeSelect del componente SolicitudForm, que es el siguiente:

onChangeSelect(e,t){
    this.setState({

        form:{
            ...this.state.form,
            [t]:e    
        }
    })
}

El bug es el siguiente:

introducir la descripción de la imagen aquí

Y no es la única foto, ya que es una lista larga y todas se actualizan.

Por qué pasa esto? como lo soluciono?

2
  • por que recarga la imagen? Deberia ser diferente la imagen cada que cambias los dropdown? Ese parpadeo que da la imagen es porque el state se modifica cuando se ejecuta el onChangeSelect y como SolicitudList esta en el render, todo se vulve a rerenderear.
    – Isaac
    Commented el 29 abr. 2020 a las 0:31
  • @Isaac, Si puedes leer la funcion onChangeSelect eso te respondera todo.
    – Shassain
    Commented el 29 abr. 2020 a las 1:10

1 respuesta 1

0

Es conjetura, pero tal vez tiene que verificar que el state ha cambiado antes de cambiarlo? Le sugiero lo siguiente:

onChangeSelect(e,t){
    if (this.state.form.t !== e) {
        // tal vez console.log(e) aqui tambien
        // para ver si `e` es objecto o primitivo.
        // ==== entre objectos solo funciona si refiere al 
        // mismo objeto en la memoria
        this.setState({
            form:{
                ...this.state.form,
                [t]:e    
            }
        })
    }
}
1
  • pues no eso no funciona, ademas de que t toma el valor de : unidad ó fondofinanciero ó user
    – Shassain
    Commented el 29 abr. 2020 a las 13:59

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.