SharePoint - Uncaught (in promise) Error: Can not set initial state more than once

user_13007607 0
Viewed 811

Update today - 05.08.2020

Now the last Breadcrumb item is updating, but I still have the console error : Uncaught (in promise) Error: Can not set initial state more than once. Does anyone had this problem ?

Old question

I am trying to create breadcrumbs in a SharePoint Online page. Whenever I go to a site page, the breadcrumbs are not updated and the last element is still the old one (not the actual one). The actual site page is loading in browser like a frame inside the site collection content. I tried using componentDidUpdate method, but when I click on another page, it doesn't go into the method. The prevProps arg is not called and it should because the url is changed.

Example:

constructor(props: ISiteBreadcrumbProps) {
    super(props);

    // Initiate the component stated
    this.state = {
      breadcrumbItems: [],
    };
  }
  
    public componentDidMount() {

    //do things 
     this.setState({
      breadcrumbItems: newBreadcrumbsList
    });
    
    }
    
    public componentDidUpdate(prevProps, prevState) {
    if (prevProps.context.pageContext.site.serverRequestPath !== this.props.context.pageContext.site.serverRequestPath) {
             this.setState({
      breadcrumbItems: newBreadcrumbsList
    });
    }
  } 

<Breadcrumb
            items={this.state.breadcrumbItems} >
          </Breadcrumb>

I have this error in console log :

Uncaught (in promise) Error: Can not set initial state more than once. at f (chunk.vendors~sp-suite-nav-search-common_none_98b1f8b240333ccaa448.js:1) at Module.u (chunk.vendors~sp-suite-nav-search-common_none_98b1f8b240333ccaa448.js:1) at Module.C (chunk.sp-suite-nav-search-common_none_94cf10ffb7278a529ef1.js:1) at sp-pages-assembly_en-us_bfc09e3768098e83385e34c646c23abe.js:1

Thanks!

sharepoint-online reactjs state sharepoint javascript
1 Answers

For me it worked this way

Breadcrumbs file

public componentDidUpdate(prevProps: ISiteBreadcrumbProps, prevState: ISiteBreadcrumbState) {
    if (prevProps!== this.props) {
      this.startGeneratingBreadcrumbs();
    }
  }

App Customizer file # (inside onInit method)

 public onInit(): Promise<void> {
    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
    this._renderPlaceHolders();
   
**//and added this inside** 
  this.context.application.navigatedEvent.add(this, () => {
       this._addElement();
    });

    return Promise.resolve<void>();
  }
  • re-render the component
user_130076070
Related