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:
Y no es la única foto, ya que es una lista larga y todas se actualizan.
Por qué pasa esto? como lo soluciono?
onChangeSelect
y comoSolicitudList
esta en el render, todo se vulve a rerenderear.onChangeSelect
eso te respondera todo.