PDA

View Full Version : [FIXED] [OPEN] [6.5.1] RendererCell use wrong record



emaze
16 Aug 2017, 1:07 AM
I try to explain the problem with an example:


import React, { Component } from 'react'
import { Grid, Column, RendererCell, Button } from '@extjs/ext-react';

export default class MyExample extends Component {

store = new Ext.data.Store({
data: [
{ "name": "Lisa", "email": "[email protected]", "phone": "555-111-1224" },
{ "name": "Bart", "email": "[email protected]", "phone": "555-222-1234" },
{ "name": "Homer", "email": "[email protected]", "phone": "555-222-1244" },
{ "name": "Marge", "email": "[email protected]", "phone": "555-222-1254" }
]
});

render() {
return (
<Grid store={this.store} ref={grid=>this.grid=grid}>
<Column text="name" dataIndex="name"/>
<Column text="Actions" dataIndex="name">
<RendererCell
renderer={(value, record) => (
<Button text='delete' handler={this.onCallClick.bind(this, record)}/>
)}
/>
</Column>
</Grid>
)
}
onCallClick = (record) =>{
this.grid.getStore().remove(record)
}
}
Push the delete button at first row, then push the delete button at new first row... at first click the row is deleted, at the second click the passed record is the before deleted record.
Am I in error or it's a bug?

Mark.Brocato
16 Aug 2017, 7:02 AM
I believe that's related to a known issue where the handler function isn't rebound on rerender. You can work around it by adding key={record.getId()} to the <Button> component. That issue will be fixed in reactor v1.1.1. It should be out in the next week or so.

https://fiddle.sencha.com/?extreact#view/editor&fiddle/256k

Mark.Brocato
16 Aug 2017, 7:02 AM
Thanks for the report! I have opened a bug in our bug tracker.

emaze
16 Aug 2017, 7:44 AM
I believe that's related to a known issue where the handler function isn't rebound on rerender. You can work around it by adding key={record.getId()} to the <Button> component. That issue will be fixed in reactor v1.1.1. It should be out in the next week or so.

https://fiddle.sencha.com/?extreact#view/editor&fiddle/256k

Thank you Mark, but... have you a suggestion in case of two or more action button?
In my case I have four button on every record

Mark.Brocato
16 Aug 2017, 7:47 AM
You can just append some string indicating the button's action to the key to make it unique within the parent. For example:



<Button key={`${record.getId()}.delete`} />

emaze
16 Aug 2017, 7:55 AM
OK, it works.
Thanks