微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

由于在reactJS的侧行选择方法中使用this.setState导致材料表上的行选择缓慢

如何解决由于在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 举报,一经查实,本站将立刻删除。