Question

我是ReactJ的新手，并且正在使用ExtReact框架。我正在显示一个网格，并进行了分页，效果很好。

我自定义了在加载数据时显示的微调器，并且在“组件装入”时可以正常工作。

但是，当我更新组件时（例如当我使用ExtReact paginator插件切换页面时），显示了另一个本机微调器，我也想对其进行自定义。

我的问题是，由于不赞成使用componentWillUpdate方法，因此我找不到使用lifeCycle组件方法的正确方法。

我最初只有一个'isLoading'状态，但是由于存储数据的加载方式，在第一次渲染后修改了'isLoading'，所以我添加了'isUpdating'。

isUpdating状态似乎保持为假，这是控制台显示的内容：

快照正在更新：false 更新！正在更新：false 索尔·古德曼！

这是我的组件代码：

    import React, {Component} from 'react';
import {Grid, Column, Toolbar, SearchField} from '@sencha/ext-modern';
import {withRouter} from "react-router-dom";
import Spinner from '../../resources/components/Spinner';

Ext.require('Ext.grid.plugin.PagingToolbar');

class Subscriptions extends Component {

    state = {
        isLoading: true,
    };

    store = Ext.create('Ext.data.Store', {
        fields: ['Field1', 'Field2', 'Field3'],
        autoLoad: false,
        pageSize: 30,
        proxy: {
            type: 'rest', // refers to the alias "proxy.ajax" on Ext.data.proxy.Ajax
            url: 'niceadress',
            reader: {
                type: 'json'
            }
        }
    });

    /**
     * Loading the datas into the store and then removes the spinner when fetched successfully
     */
    componentDidMount() {
        this.store.load({
            callback: function (records, operation, success) {
                this.setState({
                    isLoading: (!success),
                });
                console.log("Saul Goodman!");
            },
            scope: this
        });
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        if (nextState.isLoading === true){
            return false;
        } else {
            return true;
        }
    };

    getSnapshotBeforeUpdate(prevProps, prevState) {
        this.setState({
            isLoading: true,
        });
        console.log('Snapshot');
        console.log('Is loading:' + this.state.isLoading)
        return prevState;
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        this.setState({
            isLoading: (!prevState.isUpdating),
        });
        console.log('Updated!');
        console.log('Is loading:' + prevState.isLoading)
    }

    render() {

        if (this.state.isLoading) return <Spinner/>;

        return (
            <Grid
                store={this.store}
                plugins={['pagingtoolbar', 'listpaging']}
            >
                The Grid
            </Grid>
        )
    }
    }



    export default withRouter(Subscriptions);

有什么想法我做错了吗？

编辑：嗯，我首先想到商店加载不会触发componentDidUpdate方法，这就是为什么我分别编写isUploading状态的原因。我正在删除它，但仍然没有解决我的问题。

在componentDidUpdate中的setState调用之后，如何防止virtualDOM重新呈现？

我正在寻找一种打破这种循环的优雅方法。

Answer 1

isUpdating状态似乎保持为假，这是由控制台

这是因为当isUpdating为true时，shouldComponentUpdate返回false。

componentDidUpdate的setState中也有错字

Answer 2

奇怪的是，使用ExtReact Paginator进行的页面更改不会触发ComponentDidUpdate方法。然后，所有这些似乎都不是更改组件行为的正确方法。关于这一点，ExtReact文档看起来有些混乱，我看不到如何轻松地覆盖pageingtoolbar组件。

感谢您的回答！

在更新期间管理React组件的行为

2 个答案: