Я новичок в ReactJ и работаю с платформой ExtReact.Я отображаю сетку и сделал нумерацию страниц, которая работает нормально.
Я установил счетчик, отображаемый при загрузке данных, и он прекрасно работает, когда "компонент установил".
Но когда я обновляю компонент (например, когда я переключаю страницу, используя плагин ExtReact paginator), отображается другой встроенный счетчик, и я тоже хочу его настроить.
Моя проблема в том, что я не могу найти правильный способ сделать это с помощью методов компонентов lifeCycle, поскольку метод componentWillUpdate устарел.
Сначала у меня было только одно состояние 'isLoading', ноЯ добавил «isUpdating», поскольку «isLoading» был изменен после первого рендеринга из-за способа загрузки данных хранилища.
Кажется, что состояние isUpdating остается ложным, это то, что отображается на консоли:
Снимок обновляется: 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 после вызова setState в componentDidUpdate?
Я ищуза элегантный способ разорвать эту петлю.