我正在使用react-table插件,并且当我更改应用的搜索过滤器时,即使它们的值没有更改,我的单元格仍会重新渲染。
从视频中可以看到,名称和债务TD保持更新,即使它们的值是静态的。
https://i.imgur.com/2KkNs9f.mp4
我想这可能会影响较大表的性能。
有没有解决办法?还是我做错了什么?
谢谢。
编辑:
已请求代码。没什么可显示的,基本上所有操作都与文档中一样。
渲染部分:
render(){
const columns = [
{
Header: "Name",accessor: "name",classname: css.cell,headerClassname: css.cell,filterMethod: (filter,row) => {
return row[filter.id]
.toLowerCase()
.includes(filter.value.toLowerCase());
},Cell: props => {
return <span>{props.value}</span>;
}
},{
Header: "Tc",accessor: d => {
const date = d.lastChange;
if (date.length) {
const s = date.split(" ");
const s2 = s[0].split("/");
const mdy = [s2[1],s2[0],s2[2]].join("/");
const his = s[1];
return Date.parse(mdy + " " + his);
}
return "";
},id: "lastChange",Cell: props => {
return <ArrowTime lastChange={props.value}></ArrowTime>;
},classname: css.cell
},{
Header: "Debt",accessor: d => Number(d.lastDebt),id: "lastDebt",Cell: props => {
return <span classname="number">{props.value}</span>;
},getProps: (state,rowInfo,column) => {
return {
style: {
background: rowInfo ? this.getcolor(rowInfo.row.lastDebt) : null
}
};
}
}
];
return (
<ReactTable
data={this.props.table}
columns={columns}
minRows={0}
showPagination={false}
NoDataComponent={CustomNoDataComponent}
classname={css.table}
resizable={false}
filtered={[{ id: "name",value: this.props.filter }]}
getTrProps={(state,rowInfo) => {
return {
classname: rowInfo ? css.subRow : ""
};
}}
getTrGroupProps={(state,rowInfo) => {
return {
classname: rowInfo ? css.row : ""
};
}}
getTbodyProps={props => {
return {
classname: props ? css.tbody : ""
};
}}
getTheadProps={props => {
return {
classname: props ? css.thead : ""
};
}}
defaultsorted={[
{
id: "lastDebt",desc: true
}
]}
/>
);
}