Question

我有一个从REST API获取GET数据的应用程序。我能够获取数据。我还需要能够将数据发布到API，并将PUT编辑到API。我的代码能够成功执行所有这些操作，但是我需要刷新页面才能看到提交的内容。我遇到的麻烦是提交后自动重新呈现页面。我知道我必须在呼叫后设置setState或重新获取API。我不知道如何构造它。有什么建议吗？

import React, { Component } from 'react';
import './App.css';

 class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      isLoaded: false,
    }
    this.editBeersLikes = this.editBeersLikes.bind(this);
    this.addNewBeer = this.addNewBeer.bind(this);
  }

   seeBeers() {
   return fetch("https://beer.fluentcloud.com/v1/beer/")//specify id number to show single beer ex. "https://beer.fluentcloud.com/v1/beer/99"
     .then(response => response.json())
     .then(responseJson => {
       this.setState({
         isLoaded: true,
         dataSource: responseJson,
       });
       return responseJson;
     })
     .catch(error => console.log(error)); //to catch the errors if any
 }

   addNewBeer() {
    fetch("https://beer.fluentcloud.com/v1/beer/", {
      body: "{\"name\":\"\",\"likes\":\"\"}",//input beer name and like amount ex "{\"name\":\"Michelob Ultra\",\"likes\":\"-5\"}"
      headers: {
        "Content-Type": "application/json"
      },
      method: "POST"
      })
      console.log("Beer Added!");
  }

   editBeersLikes() {
    fetch("https://beer.fluentcloud.com/v1/beer/99", {//must specify id number to edit a single beer's likes ex "https://beer.fluentcloud.com/v1/beer/99"
          body: "{\"likes\":\"\"}", //input amount of likes to edit ex "{\"likes\":\"22\"}"
          headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
          },
          method: "PUT"
          })
          console.log("Likes Successfully Updated!");
        }

         componentDidMount() {
          this.seeBeers();
          //this.editBeersLikes(); //uncomment when you want to edit likes
          //this.addNewBeer();  //uncomment when you want to add beers
        }


   render() {
    return (
      <div className="App">
      <h1>What is in My Fridge?</h1>

         <ul>
          {this.state.dataSource.map(dataSource => {
            return <li key={`dataSource-${dataSource.id}`}>{dataSource.name} | {dataSource.likes}</li>
          })}
        </ul>

       </div>
    );
  }
}

 export default App;

Answer 1

最简单的方法可能是在成功将数据发布或放入服务器后重新获取数据。这也是最干净，最不容易出错的方式，因为您总是会从服务器获得最新的响应，其中包含最新的数据集。

但是，您可以使用一种通常称为“乐观ui”的模式，这意味着您保留了两种状态：当前状态和服务器请求 if 时的状态成功了。然后，您可以将新的或更新的项目推到dataSource状态，并在用户界面中显示它，但如果请求失败，则将其从服务器请求之前恢复为旧状态。

后一种方法的缺点是，有时您不重新查询服务器就无法了解所有数据（尤其是自动生成的ID或lastUpdated字段）。

因此，如果您想要一个相对简单，清晰且可靠的解决方案，则可以在每个POST / PUT请求之后调用this.seeBeers()，以接收一组更新的数据。

请记住，当您使用例如分片或弹性搜索层用于读取操作，因为它们在完成写入操作后可能不会立即同步。不过，这可能与您无关，因为在进行大规模设置时，通常这只是一个挑战。

在获取POST和PUT请求后重新呈现

1 个答案: