如何在以下使用状态的情况下重构代码?

时间:2018-11-06 06:46:16

标签: reactjs eslint

我有一个下面的组件,在其中它正在渲染,这是一个无状态功能组件,并且它具有一个方法更新过滤器,用于更新状态

    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
                });

现在,我不想在这里重新渲染。如何在不使用状态的情况下重构此代码?

0 个答案:

没有答案