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

我要上床睡觉。谢谢大家到目前为止的帮助。如果没有修复，那就很好。这不是关键。

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），所以这些功能也可能存在一些问题。