1

I have a web part running works fine and I added new one. It only read items from the list. But before get there, there is an error in browser;

"setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component"

I searched it because previous component instance is still registered. And yeah if I didnt add first web part to page no error.. but of course I need to use both of them. how can I fix it?

This is my component, referred to this example.

Footer.tsx:

import * as React from 'react';
import { css } from 'office-ui-fabric-react';
import styles from './Footer.module.scss';
import { IFooterProps } from './IFooterProps';
import HelloWorld from '../../helloWorld/components/HelloWorld';
import { HttpClient,SPHttpClient, SPHttpClientConfigurations } from '@microsoft/sp-http';

import { IFooterWebPartProps } from '../IFooterWebPartProps';

export interface IWebPartState {
  status: string;
  items: IAnnouncement[];
}
export interface IAnnouncement {
  Title?: string;
  Id: number;
}
export interface IAnnouncements {
  value: IAnnouncement[];
}

export interface IFooterProperties extends IFooterWebPartProps{
    httpClient: SPHttpClient;
  siteUrl:string;
  listName:string;
}

export default class Footer extends React.Component<IFooterProperties, IWebPartState> {
  private listItemEntityTypeName: string = "SP.Data.Announcement2ListItem";
  private siteUrl:string = "https://mydomain.sharepoint.com/sites/test14jan";
  constructor(props: IFooterProperties, state: IWebPartState) {
    super(props);
    this.state = {
      status: this.listNotConfigured(this.props) ? 'Please configure list in Web Part properties' : 'Ready',
      items: []
    };
  }

  public componentWillReceiveProps(nextProps: IFooterProperties): void {
    this.listItemEntityTypeName = "SP.Data.announcement2ListItem";
    this.setState({
      status: this.listNotConfigured(nextProps) ? 'Please configure list in Web Part properties' : 'Ready',
      items: []
    });
  }

    private readItems(): void {
    this.setState({
      status: 'Loading all items...',
      items: []
    });
    this.props.httpClient.get(`${this.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items?$select=Title,Id`, 
    SPHttpClient.configurations.v1)//SPHttpClientConfigurations.v1
      .then((response: Response): Promise<{ value: IAnnouncement[] }> => {
        return response.json();
      })
      .then((response: { value: IAnnouncement[] }): void => {
        this.setState({
          status: `Successfully loaded ${response.value.length} items`,
          items: response.value
        });
      }, (error: any): void => {
        this.setState({
          status: 'Loading all items failed with error: ' + error,
          items: []
        });
      });
  }

    private listNotConfigured(props: IFooterProperties): boolean {
    return props.listName === undefined ||
      props.listName === null ||
      props.listName.length === 0;
  }


  public render(): JSX.Element{
        const items: JSX.Element[] = this.state.items.map((item: IAnnouncement, i: number): JSX.Element => {
      return (
        <li>{item.Title} ({item.Id}) Number: {i} </li>
      );
    });
    return (<h3>test</h3>);
  }
}

FooterWebPart.ts:

export default class FooterWebPart extends BaseClientSideWebPart<IFooterProperties> {

  public render(): void {
    const element: React.ReactElement<IFooterProperties> = React.createElement(Footer, {
      httpClient: this.context.spHttpClient,
      siteUrl: this.context.pageContext.web.absoluteUrl,
      listName: "announcement2",
      description: "Chheck design of this class Yener!"

    });

    ReactDom.render(element, this.domElement);
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.