如何解决由于在reactJS的侧行选择方法中使用this.setState导致材料表上的行选择缓慢
在选择表中的行时,我面临缓慢的/几乎挂起的性能。 因为我在rowSelect内使用this.setState(sposts:'')
这是示例代码。
class EmployeeDetails extends Component {
constructor(props) {
super(props)
this.state = {
columns: [
{ title: 'Emp Id',field: 'emp_id' },{ title: 'Name',field: 'emp_name' },],posts: [],sposts: [],selectedState: false,selectedRow: 'null',};
}
componentwillMount() {
fetch(
'http://mymachine:4000/api/emp_details?filter[order]=update_date%20DESC' // rest url to fetch data
)
.then(res => res.json())
.then(data => this.setState({ posts: data }));
}
childTableData = (event) => { => childTable is called on every row select in the material table
this.setState({ sposts: '' }); => this line causing slow performance.
};
render() {
const classes = makeStyles(styles);
return (
<div>
<MaterialTable
title=""
columns={this.state.columns}
data={this.state.posts}
onRowClick={(evt,selectedRow) => (this.state.selectedRow = selectedRow.tableData.id) }
options={{
selection: true,selectionProps: rowData => ({ onClick: (event,rowData) => this.childTableData(event.target.value),color: 'primary' }),}}
/>
</div>
);
}
}
export default EmployeeDetails;
在每个行选择中使用setState的方式有问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。