多个this.setState（this.state）不重新呈现页面

Question

In my render, I have a function that updates the properties. I have listed the functions that get called between, but I think only the last one matters since it is the one that updates the data I use.

  <button 
    onClick={() =>
      this.handleUpdateProperty() 
    }>
    Update Properties 
  </button>

which calls:

  handleUpdateProperty = () => {
    this.getDataBC(); 
    this.setState(this.state);
//db.inventory.find( { status: "D" } )
  }

That in turns calls:

  getDataBC = () => {
    var rentals = scFunctions.getRents();
    console.log(web3.toAscii(rentals[1][0]));


    for(let i = 0; i < rentals[0].length; i++){
      let currentProp = {
        status: rentals[0][i].toNumber(),
        location: web3.toUtf8(rentals[1][i]).replace(/\s+/g,''),
        company: web3.toUtf8(rentals[2][i]).replace(/\s+/g,''),
        price: rentals[3][i].toNumber(),
        start: rentals[4][i].toNumber(),
        end: rentals[5][i].toNumber(),
        help: "haha"
      }
      console.log(currentProp)
      this.updateDB(currentProp);
    }
    this.getDataFromDb(); 
    this.setState(this.state);
  };

That in turn calls:

  getDataFromDb = () => {
    fetch("http://localhost:3001/api/property")
      .then(property => property.json())
      .then(res => this.setState({ data: res.data }))
      .then(this.setState(this.state))
  };

The last function does the:

`.then(res => this.setState({ data: res.data }))`

which updates the data I use to render my page. However, it doesn't update the page right away, I have to refresh the page to see the results from pressing the button. I thought .then(res => this.setState({ data: res.data })) would rerender the page?

Thank you so much

edit: The constructor is as follows:

  constructor(props) {
    super(props); 
    this.state = {
      data: [],
      show: false, // show of the rental modal
      company: "Homeaway", 
      id: 0,
      message: null,
      intervalIsSet: false,
      idToDelete: null,
      idToUpdate: null,
      objectToUpdate: null,
      rentProperty: "DongFang",
      startDate: new Date(),
      endDate: new Date(),
      firstName: "Ludwig",
      showConflict: true,
      lastName: "Wittgenstein"
    };
    this.handleCompanySubmit = this.handleCompanySubmit.bind(this);

  }

This is what uses the "data" from state. So I want this function to rerun and update the page when I setState...:

  renderProperties = data => {
    var properties = []
    var propRow = []
    data.forEach((property,index) => {
      propRow.push(<Col xs={{ size:3, offset: .5}}> 
        <Jumbotron>
          <Image src={require("./images/1.jpg")} fluid rounded />
          <b> {property.location} </b> 
          <h1> Price: {property.price} </h1> 
          <div> 
          {this.renderStatusButton(property)}
          </div>
        </Jumbotron> 
      </Col>)
      if((index+1)%3 == 0){ // if first in the row
        properties.push(<Row>{ propRow }</Row>)
        propRow = []
      }

    })
    return (
      <Container>
        {properties}
      </Container> 
    )
  }

And this is in the render:

   {this.renderProperties(data)} 

I am going to bed. Thank you all for your help so far. If it doesn't get fixed, it is fine. It is not pivotal.

Answer 1

If I'm correct, you just want to refresh the page once the fetch in getDataFromDb() has finished, is that correct?
If so, you don't need all those setState() calls, you just need one in getDataFromDb() , which should be written as follow:

getDataFromDb = () => {
    fetch("http://localhost:3001/api/property")
      .then(property => property.json())
      .then(res => this.setState({ data: res.data }))
};

That is, you don't need the last setState() call you wrote neither.

Anyways, in getDataBC() I see two functions ( getRent() and updateDB ) that I don't know what they do, so maybe there are some problems in those functions too.