javascript - 当 promise 解决时如何重新渲染 React 组件?| 如何在数据加载之前阻止渲染?
问题描述
我试图更新一个指向azure-devops-ui/Filter
. 我正在使用azure-devops-extension-sdk
它返回异步响应,以便使用此组件:
https ://developer.microsoft.com/en-us/azure-devops/components/filter
inside a WorkItem on Azure DevOps
我已经分别使用this.state
/componentDidMount
和useState
/编写了基于类和函数组件的代码useEffect
。我关注了这个 SO 帖子。
但是,我只能重新渲染状态。当状态更新时,类和功能组件中的 UI 组件都不会更新。
我有两个版本的代码,它们都在等待响应并成功更新状态。但是,两者都不会等待 UI 的呈现。
通用组件:
import {
IWorkItemChangedArgs,
IWorkItemFieldChangedArgs,
IWorkItemFormService,
IWorkItemLoadedArgs,
WorkItemTrackingServiceIds,
} from "azure-devops-extension-api/WorkItemTracking";
import * as React from "react";
import * as SDK from "azure-devops-extension-sdk";
import { Header } from "azure-devops-ui/Header";
import { Page } from "azure-devops-ui/Page";
import { Filter, getKeywordFilterItem } from "azure-devops-ui/Filter";
import { IListBoxItem } from "azure-devops-ui/ListBox";
import { AggregateItemProvider } from "azure-devops-ui/Utilities/AggregateItemProvider";
import {
Filter as FilterStore,
FILTER_CHANGE_EVENT,
IFilterState
} from "azure-devops-ui/Utilities/Filter";
import { GroupedItemProvider } from "azure-devops-ui//Utilities/GroupedItemProvider";
import { groupedItems, groups, statusItems } from "./data";
export class WorkItemComponent extends React.Component<{} & ExtendedProps, any> {
private provider: AggregateItemProvider<IListBoxItem>;
private filterStore = new FilterStore();
private textoStore = "second";
private groupedProvider = new GroupedItemProvider([], [], true);
private filterItems = [
getKeywordFilterItem(this.filterStore),
{ name: "Status", id: "status", items: statusItems, filterItemKey: "status" },
{
name: "Group Items",
id: "groupItems",
items: this.groupedProvider,
filterItemKey: "groupItems"
}
];
constructor(props: {}) {
super(props);
this.provider = new AggregateItemProvider<IListBoxItem>();
this.groupedProvider.push(...groupedItems);
this.groupedProvider.pushGroups(...groups);
this.provider.push(statusItems);
this.provider.push(this.groupedProvider);
if(this.props.pdata==="first")
this.filterStore = new FilterStore(
{defaultState: { groupItems: { value: [this.props.pdata,this.textoStore] }}}
);
else
this.filterStore = new FilterStore(
{defaultState: { groupItems: { value: [this.textoStore,this.props.pdata,] }}}
);
this.filterStore.subscribe(this.onFilterChanged, FILTER_CHANGE_EVENT);
this.state = {
//currentState: ""
currentState: JSON.stringify(this.filterStore.getState(), null, 4)
};
}
public render():JSX.Element {
return (
<Page className="sample-hub flex-grow">
<Header title="Filter" />
<div className="page-content">
<Filter
filterStore={this.filterStore}
filterItems={this.filterItems}
items={this.provider}
/>
<div style={{ marginTop: "16px" }} className="monospaced-text">
<span>Current state:</span>
<span>{this.state.currentState}</span>
<span>{this.props.pdata}</span>
</div>
</div>
</Page>
);
}
private onFilterChanged = (changedState: IFilterState) => {
this.setState({
currentState: JSON.stringify(this.filterStore.getState(), null, 4)
});
this.onFilterChangedExtended(JSON.stringify(this.filterStore.getState(), null, 4))
};
private async onFilterChangedExtended(estadoActual: string) {
const workItemFormService = await SDK.getService<IWorkItemFormService>(
WorkItemTrackingServiceIds.WorkItemFormService
);
workItemFormService.setFieldValue(SDK.getConfiguration().witInputs.FieldName, estadoActual);
}
第一个调用者在函数组件中使用 useState 和 useEffect :
import { WorkItemComponent } from "./WorkItemComponent";
const WorkItemFilterAsync: React.FC = props => {
let respuestaAsync="";
const [data, setData] = React.useState<string>('');
React.useEffect(() => {
const fetchdata = async() =>{
const result = await fngetFieldName()
setData(result);
}
// Execute the created function directly
fetchdata();
}, []);
async function fngetFieldName(): Promise<string> {
const workItemFormService = await SDK.getService<IWorkItemFormService>(
WorkItemTrackingServiceIds.WorkItemFormService
);
const respuesta = workItemFormService.getFieldValue(SDK.getConfiguration().witInputs.FieldName);
respuestaAsync = (await respuesta).toString();
return JSON.stringify(respuesta);
}
return <WorkItemComponent pdata={data}/>
}
export default WorkItemFilterAsync;
第二个调用者在一个类上有 componentDidMount:
import {
IWorkItemChangedArgs,
IWorkItemFieldChangedArgs,
IWorkItemFormService,
IWorkItemLoadedArgs,
WorkItemTrackingServiceIds,
} from "azure-devops-extension-api/WorkItemTracking";
import * as React from "react";
import { showRootComponent } from "../../Common";
import * as SDK from "azure-devops-extension-sdk";
import { WorkItemComponent } from "./WorkItemComponent";
//const WorkItemComponent = React.lazy (() => import('./WorkItemComponent'));
class WorkItemFilter extends React.Component{
state = {
externalData: false,
};
public componentDidMount() {
this.onLoadExtended();
}
render():JSX.Element {
return(
<div className="page-content">
{this.state.externalData ? <WorkItemComponent pdata="first"/> : <WorkItemComponent pdata="third"/>}
</div>
);
}
private async onLoadExtended() {
const workItemFormService = await SDK.getService<IWorkItemFormService>(
WorkItemTrackingServiceIds.WorkItemFormService
);
let varaux = workItemFormService.getFieldValue(SDK.getConfiguration().witInputs.FieldName);
if ((await varaux).toString()!=="")
{
this.setState({
externalData: true,
});
}
}
}
showRootComponent(<WorkItemFilter />);
这是父组件:
export function showRootComponent(component: React.ReactElement<any>) {
ReactDOM.render(component, document.getElementById("root"));
}
Azure Dev Ops 扩展 ( azure-devops-extension.json
) 的配置:
{
"contributions": [
{
"id": "work-item-filter",
"type": "ms.vss-work-web.work-item-form-control",
"description": "Custom Filter",
"targets": [
"ms.vss-work-web.work-item-form"
],
"properties": {
"name": "BHD Filter",
"uri": "dist/WorkItemFilter/WorkItemFilter.html",
"height": 600,
"inputs": [
{
"id":"FieldName",
"name": "Select the field for this control.",
"type": "WorkItemField",
"properties": {
"workItemFieldTypes": ["String", "PlainText", "HTML"]
},
"validation": {
"dataType": "String",
"isRequired": true
}
我也尝试将ReactDOM.render
浏览器事件放入内部,但我不能这样做,因为 UI 扩展需要一个字段来保存数据:
解决方案
使用新的 React Hooks 编写功能性反应组件很简单。在下面的示例中,我使用useState
and useEffect
。hook 是基于类的 React 组件中的同义词useState
。钩子类似于+ this.state/this.setState
。它也能够存在。useEffect
componentDidMount
componentDidUpdate
componentDidUnmount
代码的执行方式是从上到下。因为它是函数式的,它会运行一次,并以在参数中设置的默认状态呈现useState
。它不会阻止从useEffect
函数中的 API 获取数据。因此,您需要能够在没有数据的情况下处理加载。任何时候props.apiConfig
或props.id
发生变化,组件都会重新渲染,并且useEffect
一遍又一遍。它只会在第一次运行后调用useEffect
ifprops.apiConfig
和props.id
do change 。唯一令人讨厌的部分是它useEffect
不能是一个async
函数,所以你必须在getDataWrapper
不使用的情况下调用函数await
。当 API 接收到数据时,会将数据存储在 中state
,这将触发组件的重新渲染。
总结:
- 以默认状态渲染一次
- 调用
useEffect
,调用getDataWrapper
- 返回具有初始值的组件
useState
- 调用
- 一旦 API 在
useEffect
/getDataWrapper
函数中接收到数据,通过&setState
设置状态isLoading
false
setState
使用现在包含 的更新值重新渲染组件- 避免
useEffect
控制路径,因为 的第二个参数中的值useEffect
没有改变。(例如:props.apiConfig
&props.id
)。
- 避免
import React, { useState, useEffect } from 'react';
import { getDataFromAPI } from './api';
const MyComponent = (props) => {
const [state, useState] = useState({
isLoading: true,
data: {}
});
useEffect(() => {
const getDataWrapper = async () => {
const response = await getDataFromAPI(apiConfig, props.id);
setState({
isLoading: false,
data: response
});
});
getDataWrapper();
}, [props.apiConfig, props.id]);
if(state.isLoading) { return <div>Data is loading from API...</div>
return (
<div>
<h1>Hello, World!</h1>
<pre>{JSON.stringify(state.data, null, 2)}</pre>
</div>
);
};
export default MyComponent;
推荐阅读
- firebase - 未填写实时数据库中的日期类
- c# - Visual Studio 在我的代码中随机添加了很多空格
- php - 如何从 WP travel 插件自定义结帐页面
- arrays - 从数组中删除索引号
- list - 如何将参数添加到 haskell 中的列表?
- javascript - Buffer.forEach 在哪里指定?
- python - 何时以及如何从 Spark 中的缓存中删除 DataFrame?
- python - 由于 sklearn 中的未签名二进制文件,公证失败
- android - 如何在 Android 上创建气泡通知?
- php - Laravel 在 url 中显示查询参数