我有一个下面的组件,在其中它正在渲染,这是一个无状态功能组件,并且它具有一个方法更新过滤器,用于更新状态
class App extends Component {
constructor(props) {
super(props);
const queryInput = {
coveUserId,
pageNumber: 1,
recordPerPage: initialState[tabName + 'DataColumns'].recordsPerPage,
startDate,
endDate
};
this.state = {
queryInput
}
}
updateFilter(params) {
let criteria = {};
if ('All' !== params.filterValue) {
//this.state.recentAction = 'SEARCH'
recentAction = 'SEARCH';
criteria[params.filterName] = params.filterValue;
}
if (
'All' === params.filterValue ||
!this.state.dialFilter ||
JSON.stringify(this.state.dialFilter) !== JSON.stringify(criteria)
) {
console.log('im here');
this.state.dialFilter = criteria;
let startDate = this.getFromDate(this.state.DataViewEntityDetails.timeDuration);
let endDate = new Date().toISOString();
let pageNumber = 1;
let recordPerPage = this.state.tableDefaultData.recordsPerPage;
this.state.queryInput = {
coveUserId,
startDate,
endDate,
pageNumber,
recordPerPage,
...criteria
};
}
}
render() {
const FilterDial = () => {
this.logInfo('in FilterDial');
return (
<Query query={DATAVIEW_QUERY_REGISTRY['FILTER_DIAL']}>
{({ data }) => {
this.logInfo('in FilterDial :::: ', data);
if (window.dialActionClicked && data && data.filterName && data.filterName.trim() !== '') {
this.updateFilter(data);
window.dialActionClicked = false;
}
return ' ';
}}
</Query>
);
};
return (
<div
<FilterDial/>
</div>
}
现在,我可以看到“请勿直接更改状态。在以下代码中的控制台中使用setState()react / no-direct-mutation-state'错误
this.state.queryInput = {
coveUserId,
startDate,
endDate,
pageNumber,
recordPerPage,
...criteria
};
为了消除此错误,我已将其修改为以下
this.setState
({
coveUserId,
startDate,
endDate,
pageNumber,
recordPerPage,
...criteria
});
现在,我不想在这里重新渲染。如何在不使用状态的情况下重构此代码?