1

我是 ReactJs 的新手，正在使用 ExtReact 框架。我正在显示一个网格，并进行了分页，这工作正常。

我自定义了加载数据时显示的微调器，当“组件确实安装”时它工作正常。

但是，当我更新组件时（比如当我使用 ExtReact 分页器插件切换页面时），会显示另一个本机微调器，我也想自定义它。

我的问题是我找不到使用 lifeCycle 组件方法的正确方法，因为 componentWillUpdate 方法已被弃用。

我最初只有一个“isLoading”状态，但我添加了“isUpdating”，因为“isLoading”在第一次渲染后由于存储数据的加载方式而被修改。

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

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

​</p>

这是我的组件代码：

    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 重新渲染？

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

4

2 回答 2

1

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

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

您的 componentDidUpdate 的 setState 中也有一个错字

于 2018-12-04T11:32:32.617 回答
0

奇怪的是，使用 ExtReact Paginator 的页面更改不会触发 ComponentDidUpdate 方法。然后，所有这些看起来都不是改变组件行为的正确方法。ExtReact 文档在这一点上看起来有点混乱，我看不出如何轻松覆盖 pagingtoolbar 组件。

感谢您的回答！

于 2018-12-04T13:18:39.960 回答