javascript - 多个this.setState(this.state)不重新渲染页面

Question

在我的渲染中，我有一个更新属性的函数。我列出了在它们之间调用的函数，但我认为只有最后一个函数很重要，因为它是更新我使用的数据的函数。

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

调用:

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

依次调用:

  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);
  };

这又调用:

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

最后一个函数执行以下操作:

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

它更新我用来渲染页面的数据。但是，它不会立即更新页面，我必须刷新页面才能看到按下按钮的结果。我想 .then(res => this.setState({ data: res.data })) 会重新渲染页面吗？

非常感谢

编辑: 构造函数如下:

  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);

  }

这就是使用状态中的“数据”。所以我希望这个函数在我设置状态时重新运行并更新页面...:

  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> 
    )
  }

这是在渲染中:

   {this.renderProperties(data)} 

我要去 sleep 了。感谢大家迄今为止的帮助。如果没有修好，那就好了。这不是关键。

Answer 1

如果我是对的，您只想在 getDataFromDb() 中的提取完成后刷新页面，对吗？
如果是这样，您不需要所有这些 setState() 调用，您只需要 getDataFromDb() 中的一个调用，应编写如下:

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

也就是说，您不需要您编写的最后一个 setState() 调用。

无论如何，在 getDataBC() 中，我看到两个函数(getRent() 和 updateDB)，但我不知道它们的作用，所以也许这些函数也存在一些问题。