因此，我正在构建一个进行API调用的React应用程序，以接收一个随机对象，该对象包含引号，作者和一些其他信息。当组件安装（页面刷新）时，对象将随机化。但是，绑定到最初拉动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。
使用以下命令禁用响应缓存{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/
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句