javascript - 在更新期间管理 React 组件行为
问题描述
我是 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 重新渲染?
我正在寻找一种优雅的方式来打破这个循环。
解决方案
isUpdating 状态似乎保持为假,这是控制台显示的内容
这是因为当 isUpdating 为 true 时,您的 shouldComponentUpdate 将返回 false。
您的 componentDidUpdate 的 setState 中也有一个错字
推荐阅读
- php - JSON API 到 HTML Koinex API
- javascript - 如何在多个鼠标悬停上更改光标
- d3.js - Music21 和 D3.js 用于音乐特征提取和可视化?
- go - Golang 中 main 函数中的两个 .RUN() 函数
- phaser-framework - 在移相器 3 中将元素置于最前面的功能?
- c# - 将 Powershell 窗口的输出提取到字符串
- sql - 需要帮助重构此查询
- html - 带有 srcdoc 的 iframe:同页链接在框架中加载父页面
- compiler-errors - 奇怪地重复出现的通用特征模式:溢出评估需求
- php - 是否可以在同一个 php 页面中打印 javascript 数组