我尝试更新指向 azure-devops-ui/Filter
的功能组件。我正在使用返回异步响应的 azure-devops-extension-sdk
,以便使用此组件:
https://developer.microsoft.com/en-us/azure-devops/components/filter
在 Azure DevOps 上的 WorkItem 内
我已经使用 this.state
/componentDidMount
和 useState
/ 使用基于类的组件和函数组件进行了编码分别使用Effect
。我关注了this SO post 。
但是,我只能重新渲染状态。当状态更新时,类中的 UI 组件和功能组件中的 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 编写函数式 React 组件非常简单。在下面的示例中,我使用 useState
和 useEffect
。 useState
钩子(Hook)与基于类的 React 组件中的 this.state/this.setState
同义。 useEffect
Hook 类似于 componentDidMount
+componentDidUpdate
。它还可以被 componentDidUnmount
。
代码的执行方式是从上到下。因为它是函数式的,所以它将运行一次并使用 useState
参数中设置的默认状态进行渲染。它不会阻止从 useEffect
函数中的 API 获取数据。因此,您需要能够在没有数据的情况下处理加载。每当 props.apiConfig
或 props.id
发生变化时,组件都会重新渲染,并且所有 useEffect
都会再次出现。 如果 props.apiConfig
和 props.id
在第一次运行后发生变化,它只会调用 useEffect
。部分原因是 useEffect
不能是 async
函数,因此您必须调用函数 getDataWrapper
而不使用 await
。当API接收到数据时,它会将数据存储在state
中,这将触发组件的重新渲染。
总结一下:
- 以默认状态渲染一次
- 调用
useEffect
,它调用getDataWrapper
- 返回在
useState
中具有初始值的组件
- 调用
- API 在
useEffect
/getDataWrapper
函数中接收到数据后,通过setState
和 setisLoading< 设置状态
到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;
关于javascript - 当promise解析时如何重新渲染React组件? |如何阻止渲染直到数据加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61277563/