How to work with async methods in React using SharePoint as data container

Привет всем.

Сегодня хотел бы поделиться интересным исследованием как можно работать с ассинхронными методами в React для получения и загрузки данных в контролы из SharePoint списка.

Для этого мы будем использовать office-ui-fabric-react c его компонентами SpinnerLoading, TaxonomyPicker, sp-pnp-js, react-dom, react.

С чего начать, а начнем мы непосредственно с создания необходимого проекта и нужных нам файлов. Я уже об этом рассказывал в предыдущей статье https://blogs.msdn.microsoft.com/sergey_belskiy_technical_blog/2017/08/10/how-to-develop-for-sharepoint-on-premise-using-sp-pnp-core-js-node-js-and-visual-studio-code-on-mac/

Для начала нам необходимо создать метод, которым мы будем забирать данные из SharePoint.

loadSubscriptionData(){

setup({

headers: {

"Accept": "application/json;odata=verbose",

}

});

let w = new Web("https://sharepoint.com");

w.lists.getByTitle("List").items.top(5000).select("Title", "ID").get().then((items) =>{

let Qualifications = [];

items.map(function(item) {

Qualifications.push({

"label" : item.Title,

"value" : item.ID.toString()

});

});

this.setState({QualificationData: Qualifications, isLoading: false});

})

}

Далее нам необходимо вызвать этот метод в специальном методе react

componentWillMount(){

this.loadSubscriptionData();

}

Этот метод вызывается перед методом Render и прорисовкой компонентов на странице. Более детально можно ознакомиться с этим методом здесь https://facebook.github.io/react/docs/react-component.html#componentwillmount.

Но все равно у нас нет столько времени ожидания, так как список не успеет подгрузится в ассинхронном методе. Для этого нам на помощь приходит спинер.

render() {

return (

<div>

{ this.state.isLoading &&

<SpinnerLoading />

}

{ !this.state.isLoading &&

<div>

<TaxonomyPicker

name="Qualification"

displayName="Qualification:"

defaultOptions={this.state.QualificationData}

multi={true}

placeholder="Qualification"

className = "ms-font-xs ms-fontWeight-regular ms-fontSize-xs"

onPickerChange = {this.changedQualification.bind(this)}

/>

<PrimaryButton

data-automation-id='dataSubmit'

text='Create'

className = "ms-font-xs ms-fontWeight-regular ms-fontSize-xs"

onClick = {this.addItem}

/>

</div>

}

</div>

);

}

То есть другими словами, пока данные не подгрузятся у нас спинер будет крутиться и пользователь будет ожидать пока появится комбобокс с данными из списка SharePoint.