由于在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 (将#修改为@）