Why is setState(this.state) not triggering a rerender?

Question

I am trying to get my component to rerender after deleting an entry from the table. I have tried binding my functions and using this.forceUpdate() as well but nothing seems to work. Any help will be much appreciated!

This is my component

class Directory extends Component {
  constructor() {
    super();
    this.state = {
      tenantData: [],
      searchText: "",
      searchedColumn: "",
      tenantInfo: {},
      visible: false,
      userId: null,
      rerender: "",
    };

    // this.delTenant = this.delTenant.bind(this);
    this.deleteAudit = deleteAudit.bind(this);
    // this.deleteTenant = this.deleteTenant.bind(this);
    // this.onDeleteClick = this.onDeleteClick.bind(this);
  }

This is my delete function within my component

 onDeleteClick = () => {
        this.setState({
          ...this.state,
          visible: false,
        });
        var tenantList = this.state.tenantData;
        for (var i = 0; i < tenantList.length; i++) {
          if (tenantList[i].userId == this.state.userId) {
            console.log(this.state.userId);
            delTenant({ _id: tenantList[i]._id });
            deleteTenant({ _id: this.state.userId });
            this.deleteAudit({ tenantID: tenantList[i]._id }).then(() => {
              this.setState(this.state); // this should rerender the component but it does not
              console.log("force update");
            });
            break;
          }
        }

And this is my AntD component


              Are you sure you want to delete this Tenant?

EDIT:

Soultion found - My component did rerender, but my tenantData state was unchanged as I forgot to get the data from the database after deleting the entry.

this.deleteAudit({ tenantID: tenantList[i]._id }).then(() => {
          // this.setState(this.state); // this should rerender the component but it does not
          this.getTenantFunction(); // this gets the new data from database and sets the state of tenantData to the updated one
        });

user_15611356 · Answer

this.setState(this.state); // this should rerender the component but it does not

React doesn't re-render your component if your state or props doesn't change.

I don't know why forceUpdate doesn't work, look at this example

import React from "react";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      tenantData: [],
      searchText: "",
      searchedColumn: "",
      tenantInfo: {},
      visible: false,
      userId: null,
      rerender: ""
    };
  }
  onDeleteClick = () => {
    console.log("click");
  };
  onDeleteClickForced = () => {
    console.log("clickForced");
    this.forceUpdate();
  };

  render = () => {
    console.log("render");
    return (
      <>
        
        
      
    );
  };
}

Why is setState(this.state) not triggering a rerender?

1 Answers