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
