そこで、見積もり、作成者、その他の情報を含むランダムなオブジェクトを受け取るために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"}フェッチリクエストに追加しましたが、解決しました。質問は重複としてマークされていますが、私の問題はフェッチ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]
コメントを追加