SPFx: I can't reload a web part after save!

Highlighted
Regular Contributor

Hi,

 

I have a webpart which is very simple, it reads data from a list and allow the user select a Yes/no value and save the selection back to the list in a Yes/no column. 

 

The webpart is working almost perfect. 

The problem is when the user has made his choice and save the selections, the webpart doesn't reload, instead I need to reload the page to see the newly added data rendered in the webpart. 

 

To show the options that the user can select I am using a Panel control from Ms fabric UI. 

I tried with shouldComponentUpdate()  but for some reason it block the panel and is impossible to open it. 

I also tried with componentDidUpdate() but nothing happens, I still be forced to reload the page to see the new values. 

 

Then searching more in internet I found this answer in the community: How to refresh SPFX webpart

and I followed the last instructions but still nothing happens. 

 

This is my code: 

The render method (I post the entire method in case there is something wrong in it): 

public render(): React.ReactElement<IYesnoProps> {
return (
<div className={ styles.yesno }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<div>
<DefaultButton
data-automation-is="test"
text="Create new manager"
onClick={this._showPanel}
/>
<Panel
isOpen={this.state.isOpen}
type={PanelType.medium}
onDismiss={this._hidePanel}
headerText="Create new manager"
closeButtonAriaLabel="Close"
onRenderFooterContent={this._onRenderFooterContent}
>
<TextField
value={this.state.Title}
required={true}
onChanged={this.handleTitle}
/>
<Toggle
defaultChecked={false}
onText="On"
offText="Off"
label="With inline label and without onText and offText"
onChanged={this._getStatus}
/>
</Panel>
</div>
<ListView
items={this.state.selection}
viewFields={this._viewFields}
iconFieldName="ServerRelativeUrl"
/>
</div>
</div>
</div>
</div>
);
}

After updating the state the following method save the data in the list, this is called when the user clicks on the Save button of the Panel component: 

 

private createItem(): void {
pnp.sp.web.lists.getByTitle('yesno').items.add({
Title: this.state.Title,
test: this.state.Active
});
this._hidePanel();
this._buttonClickHandler();
}

private _buttonClickHandler = (): void => {
console.log('update called');
this.render();
}

The last task of the createItem() is call the _buttonClickHandler() to re-render the webpart. 

I can see the message from the console.log but the webpart doesn't refresh. 

 

Any idea what is wrong?

 

Best regards

Americo

0 Replies