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

Question

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

我自定义了加载数据时显示的微调器，在 "component did mount".

时它工作正常

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

我的问题是我没有找到使用 lifeCycle 组件方法执行此操作的正确方法，因为 componentWillUpdate 方法已被弃用。

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

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

快照是 updating:false 更新！是 updating: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 状态的原因。我正在删除它，但仍然没有解决我的问题。

如何防止 virtualDOM 在 componentDidUpdate 中调用 setState 后重新渲染？

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

Answer 1

The isUpdating state seems to stay false, this is what is displayed by the console

这是因为当 isUpdating 为真时，您的 shouldComponentUpdate 返回假。

你的 componentDidUpdate 的 setState 也有错别字

Answer 2

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

感谢您的回答！

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

Managing React component behavior during update

javascript

reactjs

extreact