Estoy usando reaccionar para escribir una página para mostrar imágenes en el navegador. Estoy usando el siguiente código para representar un bloque de visualización de imágenes
renderPicShowBlock= () => { if (this.state.records) { let picBlocks = [] for (const record of this.state.records) { picBlocks.push( <PicShowBlock user={this.state.user} key={record.id} record={record} onItemDelete={()=>this.handleItemDelete(record.id)} /> ) } return picBlocks } else { return null } } handleItemDelete se define como una función de flecha:
handleItemDelete= (id) => { axios.post("/core/data/record/", {"action": "delete", "item_id": id}).then((response)=>{ console.log(response.data) this.init_record() }) } El problema es que cuando llamo a onItemDelete en este componente, el registro en este cierre se atasca apuntando al último registro en this.state.records . Estaba pensando que podría ser esa "trampa de cierre de JS" causada por JS glocal scpoe, pero parece que no. ¿A qué viene este problema? ¿Eso es causado por el cierre o algunos errores de lógica de código?
Usé create-react-app para configurar este proyecto.
Puedes darle la vuelta:
<PicShowBlock user={this.state.user} key={record.id} record={record} onItemDelete={this.handleItemDelete(record.id)} />y
handleItemDelete= (id) => () => { axios.post("/core/data/record/", {"action": "delete", "item_id": id}).then((response)=>{ console.log(response.data) this.init_record() }) } De esta forma, this.handleItemDelete(record.id) se ejecutará de inmediato con el record correcto y la función solo devolverá la devolución de llamada que desea en su componente.
Oh, descubrí que fue causado por otro problema. Es porque la lógica para procesar la identificación del botón de eliminación es incorrecta, el javascript de Bootstrap selecciona otro botón de eliminación de otro ShowBlock