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.


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;

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) {
    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";
      status: this.listNotConfigured(nextProps) ? 'Please configure list in Web Part properties' : 'Ready',
      items: []

    private readItems(): void {
      status: 'Loading all items...',
      items: []
      .then((response: Response): Promise<{ value: IAnnouncement[] }> => {
        return response.json();
      .then((response: { value: IAnnouncement[] }): void => {
          status: `Successfully loaded ${response.value.length} items`,
          items: response.value
      }, (error: any): void => {
          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>);


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.