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

  }

这就是使用状态中的“数据”的原因。所以我想在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> 
    )
  }

这是在渲染中：

   {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）我不知道它们的作用，因此这些函数中也可能存在一些问题。 / p>

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

1 个答案: