Question

因此，我正在构建一个React应用程序，该应用程序正在进行API调用以接收包含引号，作者和其他一些信息的随机对象。当组件安装（在页面刷新时）时，对象被随机化。但是，绑定到最初拉动API的相同函数的按钮仅接收与加载页面时相同的对象。随机性是从端点提供的，而不是在我的代码中提供的。

不确定为什么这种方法不起作用，因为接收到的数据在页面刷新时是唯一的，但在onClick事件上却不是。

所以这是我正在使用的一些代码：

我的API提取功能：

httpCallout(){
    fetch('https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1')
    .then(response => response.json())
    .then((data) => {
      const quote = data[0].content;
      this.setState({
        quote: quote,
        author: data[0].title
      });
    });
  }

生命周期函数内的调用：

  componentDidMount(){
    this.httpCallout();

  }

然后是元素

<button id="new-quote" className="btn btn-light" onClick={this.httpCallout}>New Quote</button>

同样，我希望每次单击事件都收到一个包含新数据的新对象，但是，我得到的数据与页面加载时相同。

编辑：只是数据被缓存。我将{cache: "no-cache"}添加到了提取请求中，此请求已解决。该问题被标记为重复，但是我发现所需的解决方案略有不同，因为我的问题是使用fetch API而不是jQuery或AJAX。

Answer 1

看来您的浏览器只是在缓存响应。您可以解决此问题：

fetch('https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_=' + Date.now())

通过添加一个额外的（基本上是随机的）参数，浏览器会将其视为新的URL。

通过将当前URL放入浏览器选项卡并重新加载几次，您可以自己看到效果。

Answer 2

使用{cache: "no-cache"}禁用响应缓存：

fetch(
'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
 {cache: "no-cache"}
)

更多信息：https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/

Answer 3

将{cache: "no-store"}添加到您的提取调用中：

httpCallout = () => {
fetch(
  "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1",
  { cache: "no-store" })
  .then(response => response.json())
  .then(data => {
    // ...
  });
};

此处的工作示例（使用Hooks）：https://codesandbox.io/s/serverless-hooks-fchnk

为什么我的API调用应该在随机的情况下接收重复数据？

3 个答案: